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

Cannot extract local video file duration in mobile browser

本文关键字：视频 文件 持续时间 提取 移动 浏览器      更新时间：2023-09-26

我正在使用文件输入从用户的移动设备捕获录制的视频。然后我想做的是以某种方式读取该文件，并确定它是否超过一定的持续时间(在本例中为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);
}

我认为正在发生的事情是，loaddmetadata事件(或loadddata事件，如您的问题)只是不会在您正在测试的移动设备上触发，因此持续时间不可用于阅读，并呈现为0。点击这里查看与HTML5媒体元素规范相关的事件。注意，你可以对媒体元素使用loadstart事件，而不是onload事件来微调你的web应用程序。

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

处理Web Audio API，你可以通过从decodeAudioData方法接收的缓冲区获得持续时间。这里有一些关于这个主题的信息。

您可以使用PHP或Java在服务器端读取这些信息，但这并不适合您的设计。

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

通过使用FFMPEG的FFprobe服务解决了这个问题。我们只下载一小部分视频——大约4k就足够了——然后读取元数据。但是，对于quicktime，元数据位于视频的末尾，因此您必须将开头换成结尾。这是使用qt快速启动的修改版本完成的:

https://github.com/danielgtaylor/qtfaststart

相关文章：