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

Question

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

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

我尝试了 onloadedmetadata 但我认为这不会起作用。

请注意：我仍在学习 javascript。

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

           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 ;
 }

超文本标记语言

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

根本无法获得出现的持续时间。

Answer 1

它实际上相当简单，但由于这需要将文件转换为 blob，然后使用视频元素检查其持续时间，因此上传超过几分钟的视频将需要大量处理并极大地减慢您的页面速度。我添加了文件大小限制（我认为这是一个合理的开始）。这是一个片段（由于沙箱限制，它在 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>