Question

我正在使用文件输入来捕获用户移动设备上录制的视频。我想要做的是以某种方式读取该文件并确定它是否超过一定的持续时间（在这种情况下为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);

}

Answer 1

发生了什么我相信，您正在测试的移动设备上没有触发loadedmetadata事件（或您问题中的loadeddata事件），因此持续时间无法读取并呈现为0.看看这里是链接到HTML5媒体元素specs的事件。请注意，您可以对media元素使用loadstart事件而不是onload事件来微调Web应用程序。

通常在iOS上，事件将触发用户交互...而不是之前（与canplay事件一样）。这是尝试减少用户对其移动设备的付费数据计划的带宽消耗的限制。 Apple为here描述了这一点。 Android也是如此。

处理Web Audio API，您可以通过从decodeAudioData方法接收的缓冲区获得持续时间。以下是subject的一些信息。

您可以使用PHP或Java阅读此信息服务器端，但这不适用于您的设计。

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

Answer 2

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

https://github.com/danielgtaylor/qtfaststart

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

2 个答案: