Получить видео длительность при вводе видеофайла

Question

Я делаю проект с HTML и Javascript, который будет работать локально с локальными файлами. Мне нужно выбрать файл с помощью ввода, получить его информацию, а затем решить, добавлю ли я в свой список и воспроизвести или нет. И если я решит использовать его, мне придется поместить его в очередь, чтобы использовать его позже. В противном случае я просто отброшу и выберу другой файл.

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу найти способ получить продолжительность vídeo, просто выбрав его на входе.

Я искал много, и я не нашел никакого способа получить продолжительность. В этом коде ниже я попытался использовать 'file.duration', но не работал, он просто возвращает 'undefined'.

Это мой вход, нормальный, как вы можете видеть.

<div id="input-upload-file" class="box-shadow"> 
    <span>upload! (ღ˘⌣˘ღ)</span> <!--ignore the text face lol --> 
    <input type="file" class="upload" id="fileUp" name="fileUpload" onchange="setFileInfo()"> 
</div> 

И это функция, которую я использую, чтобы получить всю информацию.

function setFileInfo(){ 
    showInfo(); //change div content 
    var file = document.getElementById("fileUp").files[0]; 
    var pid = 1; 
    var Pname = file.name; 
    Pname = Pname.slice(0, Pname.indexOf(".")); //get filename without extension 
    var Ptype = file.type; 
    var Psize = bytesToSize(file.size); //turns into KB,MB, etc... 
    var Pprior = setPriority(Ptype); //returns 1, 2 or 3 
    var Pdur = file.duration; 
    var Pmem = getMemory(Psize); //returns size * (100 || 10 || 1) 
    var Pown = 'user'; 
    /* a lot of stuff throwing this info to the HTML */ 
    console.log(Pdur); 
} 

Есть ли способ сделать это? Если нет, то какие альтернативы могут мне помочь?

Answer 1

В modern browsers, вы можете использовать URL API URL.createObjectURL() с не присоединенным элементом видео для загрузки содержимого вашего файла.

var myVideos = []; 
 

 
window.URL = window.URL || window.webkitURL; 
 

 
document.getElementById('fileUp').onchange = setFileInfo; 
 

 
function setFileInfo() { 
 
    var files = this.files; 
 
    myVideos.push(files[0]); 
 
    var video = document.createElement('video'); 
 
    video.preload = 'metadata'; 
 

 
    video.onloadedmetadata = function() { 
 
    window.URL.revokeObjectURL(video.src); 
 
    var duration = video.duration; 
 
    myVideos[myVideos.length - 1].duration = duration; 
 
    updateInfos(); 
 
    } 
 

 
    video.src = URL.createObjectURL(files[0]);; 
 
} 
 

 

 
function updateInfos() { 
 
    var infos = document.getElementById('infos'); 
 
    infos.textContent = ""; 
 
    for (var i = 0; i < myVideos.length; i++) { 
 
    infos.textContent += myVideos[i].name + " duration: " + myVideos[i].duration + '\n'; 
 
    } 
 
}

<div id="input-upload-file" class="box-shadow"> 
 
    <span>upload! (ღ˘⌣˘ღ)</span> 
 
    <input type="file" class="upload" id="fileUp" name="fileUpload"> 
 
</div> 
 
<pre id="infos"></pre>