वीडियो फ़ाइल इनपुट करते समय वीडियो अवधि प्राप्त करें

Question

मैं HTML और जावास्क्रिप्ट के साथ एक प्रोजेक्ट कर रहा हूं जो स्थानीय फ़ाइलों के साथ स्थानीय चलाएगा। मुझे इनपुट द्वारा फ़ाइल का चयन करने, इसे जानकारी प्राप्त करने और फिर यह तय करने की आवश्यकता है कि मैं अपनी सूची में जोड़ूंगा और पुन: उत्पन्न करूंगा या नहीं। और अगर मैं इसका इस्तेमाल करने का फैसला करता हूं तो मुझे इसे बाद में उपयोग करने के लिए कतार में रखना होगा। अन्यथा मैं सिर्फ एक और फाइल को छोड़ दूंगा।

मुझे जिस समस्या का सामना करना पड़ रहा है वह यह है कि मुझे इनपुट पर इसे चुनकर vídeo अवधि प्राप्त करने का कोई तरीका नहीं मिल रहा है।

मैंने बहुत कुछ खोजा है और मुझे अवधि प्राप्त करने के लिए कोई विधि नहीं मिली है। नीचे दिए गए कोड में मैंने 'file.duration' का उपयोग करने की कोशिश की लेकिन काम नहीं किया, यह केवल अपरिभाषित 'देता है।

यह मेरा इनपुट है, जैसा कि आप देख सकते हैं।

<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.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>