上传前如何获取视频的元数据（长度）？

Question

首先，我试图从文件中提取视频时长，然后显示它，而无需实际上传文件。

当用户选择视频时 - 信息将显示在视频下方，包括文件名、文件大小、文件类型。无论我的技能多么糟糕 - 我无法获得显示的持续时间。我尝试了一些从其他站点以及这里找到的代码 sn-ps，但它们似乎都不起作用。只是试图找到一个可以完成任务的简单代码。

我尝试了 onloadedmetadata，但我认为这根本行不通。

请注意：我还在学习 javascript。

我还尝试了一些网站教程和一些通过 stackoverflow 找到的代码 sn-p

           function uploadFunction(){
                //Variables
                var cVideo = document.getElementById("fileUp");
                var txtInfo = "";

               //function 
                if ('files' in cVideo){
                    if(cVideo.files.length == 0){
                    txtInfo = "Please select a video";
                } else {
                    for (var v = 0; v < cVideo.files.length; v++){
                        txtInfo += "<br><strong>#" + (v+1) + " File Information:</strong> <br>";         
                        var infoFile = cVideo.files[v];
                        if('name' in infoFile){
                            txtInfo += "File name: " +infoFile.name +"<br>";
                        }
                        if('size' in infoFile){
                           txtInfo += "File size: " +infoFile.size +" Bytes <br>"; 
                        }
                        if('type' in infoFile){
                            txtInfo += "File Type: "+infoFile.type +" <br>";
                        }
                        if('duration' in infoFile){
                            txtInfo += "Duration : "+infoFile.duration +"<br>";
                        }

                    }
                }

                }
                document.getElementById("information").innerHTML = txtInfo ;
 }

HTML

           <input type="file" id="fileUp" name="fileUpload" multiple size="50" onchange="uploadFunction()">
           <p id="information"></p>

根本无法获得持续时间。

Answer 1

这实际上相当简单，但是由于这需要将文件转换为 blob，然后使用视频元素检查其持续时间，因此上传超过几分钟的视频将需要大量处理并减慢您的页面 非常好。我添加了文件大小限制（我认为这是一个合理的开始）。这是一个 sn-p（由于沙盒限制，它不会在 Stack Overflow 上工作，但我确实在本地服务器上对其进行了测试）。我显然也不会检查 MIME 类型或它是否是视频，尽管如果您上传任何不是视频的内容，loadedmetadata 将不会触发。

const fileInput = document.querySelector( 'input[type=file]' );
const fileDuration = document.getElementById( 'file-duration' )

// Listen for any change to the value of the file input

fileInput.addEventListener( 'change', event => {

    fileDuration.textContent = 'Fetching video duration...';

    // When the file selected by the user changes:
    // - create a fresh <video> element that has not yet fired any events
    // - create a file reader to safely retrieve and manipulate the file

    const file = event.target.files[0];
    const video = document.createElement( 'video' );
    const reader = new FileReader();

    // Cancel if the initial filesize just seems too large.
    // If the maximum allowed is 30 seconds, then a Gigabyte of file seems too much.

    if( file.size > 10000000 ){

        fileDuration.textContent = `File is too large (${file.size}). Refused to read duration.`;
        return;

    }

    // Before setting any source to the <video> element,
    // add a listener for `loadedmetadata` - the event that fires
    // when metadata such as duration is available.
    // As well as an error event is case something goes wrong.

    video.addEventListener( 'loadedmetadata', event => {

        // When the metadata is loaded, duration can be read.

        fileDuration.textContent = `Video is ${video.duration} seconds long.`;

    });

    video.addEventListener( 'error', event => {

        // If the file isn't a video or something went wrong, print out an error message.

        fileDuration.textContent = `Could not get duration of video, an error has occurred.`;

    });

    // Before reading any file, attach an event listener for
    // when the file is fully read by the reader.
    // After that we can use this read result as a source for the <video>

    reader.addEventListener( 'loadend', function(){

        // reader.result now contains a `blob:` url. This seems like a
        // nonsensical collection of characters, but the <video> element
        // should be able to play it.

        video.src = reader.result;

        // After we assigned it to the `src` of the <video>, it will be
        // act like any other video source, and will trigger the related
        // events such as `loadedmetadata`, `canplay`, etc...

    });

    // Instruct the reader to read the file as a url. When its done
    // it will trigger the `loadend` event handler above.

    reader.readAsDataURL( file );

});

<input type="file" />
<p id="file-duration">No video file</p>