Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/473.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 无法在移动浏览器中提取本地视频文件持续时间_Javascript_Mobile_Html5 Video_Blob_Filereader - Fatal编程技术网

Javascript 无法在移动浏览器中提取本地视频文件持续时间

Javascript 无法在移动浏览器中提取本地视频文件持续时间,javascript,mobile,html5-video,blob,filereader,Javascript,Mobile,Html5 Video,Blob,Filereader,我正在使用文件输入从用户的移动设备捕获录制的视频。我想做的是以某种方式读取该文件,并确定它是否超过某个持续时间(本例中为30秒)。如果超过该持续时间,则不允许将文件上载到服务器。这是在持续时间内,然后它是好的 我可以在桌面上用javascript准确地检测文件的持续时间,但在移动设备上不能,这正是我所需要的。这是我的代码: onEndRecord = function(e) { var file = e.target.files[0]; var videoEle

我正在使用文件输入从用户的移动设备捕获录制的视频。我想做的是以某种方式读取该文件,并确定它是否超过某个持续时间(本例中为30秒)。如果超过该持续时间,则不允许将文件上载到服务器。这是在持续时间内,然后它是好的

我可以在桌面上用javascript准确地检测文件的持续时间,但在移动设备上不能,这正是我所需要的。这是我的代码:

onEndRecord = function(e) {
        var file = e.target.files[0];

        var videoElement = document.createElement('video');
        document.body.appendChild(videoElement);
        var fileURL = window.URL.createObjectURL(file);

        videoElement.addEventListener('loadeddata', function(e) {
            console.log('loadeddata',e.target.duration);
        });

        videoElement.onload = function () { // binding onload event
            console.log('onload',videoElement.duration);
        };

        videoElement.src = fileURL;

}
有人知道如何获得这些信息吗?手机上的持续时间报告为零

我还尝试通过文件读取器api运行它:

readBlob = function(file){
    console.log('readBlob',file);

    var reader = new FileReader();

    reader.onload = function (e) {

        console.log('reader load');
        var player = document.getElementById('videoReader');

        player.addEventListener('loadeddata', function(e) {
            console.log('loadeddata',e.target.duration);
            player.play();
        });
        var fileURL = window.URL.createObjectURL(file);
        player.src = fileURL;

    }

    reader.readAsDataURL(file);

}

我认为发生的情况是loadedmetadata事件(或您问题中的loadeddata事件)不会在您正在测试的移动设备上触发,因此持续时间不可读取,并呈现为0。在这里查看链接到HTML5媒体元素的事件。请注意,您可以使用媒体元素的loadstart事件而不是onload事件来微调web应用程序

通常在iOS上,事件将在用户交互时触发。。。之前没有(如canplay事件)。这是试图减少用户在其移动设备的付费数据计划上的带宽消耗的限制。这是为苹果公司描述的。Android也一样

处理Web音频API时,您可以通过从decodeAudioData方法接收的缓冲区获得持续时间。这里是一些关于这个网站的信息

您可以使用PHP或Java在服务器端阅读此信息,但这对您的设计来说最好不过了


因此,您可以让用户在上传之前播放录制的样本,以访问持续时间,或者如果您知道录制视频的平均比特率和文件大小(文件API),则您可以估计持续时间。

通过使用FFMPEG的FFprobe服务解决了这一问题。我们只下载少量视频(大约4k就足够了),然后读取元数据。但是,对于quicktime,元数据位于视频的末尾,因此您必须将开头替换为结尾。这是使用qt fast start的修改版本完成的:


您使用的是HTML5元素,其中JavaScript API不是很稳定。最有可能的是,手机浏览器不支持给出持续时间,比如桌面,因为移动浏览器操作系统级编解码器缺乏所需的功能。如果视频文件是MPEG4,我建议您尝试用纯JavaScript直接解析其中的信息-只有这样,您才能确保编解码器的功能不会因浏览器而异。这个库可能有助于另一种猜测,即移动浏览器根本不允许从文件源创建