एचटीएमएल 5 वीडियो अवधि को पुनर्प्राप्त करने में समस्या

Question

अद्यतन: ठीक है, हालांकि मैंने इस समस्या को बिल्कुल हल नहीं किया है, लेकिन मैंने अपने काम की सबसे बड़ी चिंता ... उपयोगकर्ता अनुभव को संभाला है।

सबसे पहले वीडियो लोडर बटन को हिट करने के बाद लोडिंग शुरू नहीं होता है, इसलिए मुझे लगता है कि अवधि की जानकारी खींचने के लिए उपलब्ध नहीं थी (मुझे नहीं पता कि इस विशेष मुद्दे को कैसे ठीक किया जाए .. हालांकि मुझे लगता है कि इसमें वीडियो से अलग वीडियो मेटाडेटा को लोड करना शामिल होगा, लेकिन मुझे यह भी पता नहीं है कि यह संभव है या नहीं)।

तो इस तथ्य को पाने के लिए कि कोई अवधि डेटा नहीं है, मैंने अवधि को पूरी तरह से अवधि की जानकारी (और वास्तव में पूरे नियंत्रण) को छिपाने का फैसला किया जब तक कि आप खेलें।

मुझे पता है ... इसकी धोखाधड़ी। लेकिन अब के लिए यह मुझे खुश बनाता है :)

यह कहा गया ... अगर कोई जानता है कि वीडियो फ़ाइल से अलग वीडियो मेटाडेटा को कैसे लोड किया जाए ... कृपया साझा करें। मुझे लगता है कि इस समस्या को पूरी तरह से हल करना चाहिए।

---

मैं एक कस्टम इंटरफेस के साथ एक HTML5 वीडियो प्लेयर के निर्माण पर काम कर रहा हूँ, लेकिन मैं कुछ समस्याओं प्रदर्शित करने के लिए वीडियो की अवधि में जानकारी प्राप्त करने हो रहा है।

मेरे एचटीएमएल असली सरल है (नीचे देखें)

<video id="video" poster="image.jpg" controls>  
    <source src="video_path.mp4" type="video/mp4" /> 
    <source src="video_path.ogv" type="video/ogg" /> 
</video> 
<ul class="controls"> 
<li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li> 
</ul> 

और जावास्क्रिप्ट मैं और अवधि को सम्मिलित करने का उपयोग कर रहा

var duration = $('#duration').get(0); 
var vid_duration = Math.round(video.duration); 
duration.firstChild.nodeValue = vid_duration; 

है समस्या कुछ नहीं होता है। मुझे पता है कि वीडियो फ़ाइल में अवधि डेटा है क्योंकि अगर मैं केवल डिफ़ॉल्ट नियंत्रण का उपयोग करता हूं, तो यह ठीक दिखाता है।

लेकिन असली अजीब बात है, तो मैं बहुत

alert(duration); 
var vid_duration = Math.round(video.duration); 
duration.firstChild.nodeValue = vid_duration; 

की तरह मेरे कोड में चेतावनी (अवधि) लगाया जाता तो यह है ठीक (ऋण कष्टप्रद चेतावनी पॉप अप होने वाले) काम करता है। कोई विचार क्या हो रहा है या मैं इसे कैसे ठीक कर सकता हूं?

Answer 1

मुद्दा वेबकिट ब्राउज़रों में है; वीडियो मेटाडाटा वीडियो के बाद लोड किया जाता है, इसलिए जब जेएस चलता है तो उपलब्ध नहीं होता है। आपको readyState विशेषता से पूछताछ करने की आवश्यकता है; इसमें 0 से 4 के मानों की एक श्रृंखला है, जो आपको बताती है कि वीडियो किस स्थिति में है; जब मेटाडेटा लोड हो गया है तो आपको 1 का मान मिलेगा।

तो तुम जैसे कुछ करने की जरूरत है:

window.setInterval(function(t){ 
    if (video.readyState > 0) { 
    var duration = $('#duration').get(0); 
    var vid_duration = Math.round(video.duration); 
    duration.firstChild.nodeValue = vid_duration; 
    clearInterval(t); 
    } 
},500); 

मुझे लगता है कि कोड का परीक्षण नहीं किया है, लेकिन यह (या इसे की तरह कुछ) काम करना चाहिए।

developer.mozilla.org पर मीडिया तत्व विशेषताओं के बारे में अधिक जानकारी है।

Answer 2

यह आपके कोड

var duration = document.getElementById("duration"); 
var vid_duration = Math.round(document.getElementById("video").duration); 
//alert(vid_duration); 
duration.innerHTML = vid_duration; 
//duration.firstChild.nodeValue = vid_duration; 

आशा इस मदद करता है करने के लिए संशोधन है।

ऐसा लगता है कि आप IE का उपयोग कर रहे हैं, तो आप वीडियो ऑब्जेक्ट को पुनर्प्राप्त करने के लिए document.getElementById विधि का उपयोग क्यों नहीं करते?

Answer 3

कि कार्य करें: ब्राउज़र वीडियो से सभी मेटा डेटा प्राप्त जब

var myVideoPlayer = document.getElementById('video_player'); 
myVideoPlayer.addEventListener('loadedmetadata', function() { 
    console.log(myVideoPlayer.duration); 
}); 

ट्रिगर किया जाता है।

तब से बेहतर दृष्टिकोण जैसे बजाय 'loadedmetadata' जो अविश्वसनीय हो सकता है की 'durationchange' को सुनने के लिए, हो सकता है [संपादित करें]:

myVideoPlayer.addEventListener('durationchange', function() { 
    console.log('Duration change', myVideoPlayer.duration); 
}); 

Answer 4

एचटीएमएल 5 कल्पना केवल मेटाडाटा पहले से लोड होने के लिए अनुमति नहीं है:

<video id="video" poster="image.jpg" controls preload="metadata">  
    <source src="video_path.mp4" type="video/mp4" /> 
    <source src="video_path.ogv" type="video/ogg" /> 
</video> 

http://www.w3.org/TR/html-markup/video.html#video.attrs.preload

Answer 5

मैं एक ही समस्या का सामना करना पड़ा: वीडियो की अवधि नहीं पढ़ सकते हैं, $('video')[0].duration हमेशा NaN लौटने के लिए, मैं के स्वीकार किए जाते हैं जवाब में भेजा @stopsatgreen और कोड को एक सामान्य मामले में फिट करने के लिए बदलें, यह वास्तव में काम करता है।

var video = $('video')[0]; 
var t = setInterval(function() { 
    if(video.readyState > 0) { 
     var duration = video.duration; 
     console.log(duration); 
     clearInterval(t); 
    } 
}, 500); 

कोड बहुत सरल है और वास्तव में काम करते हैं, तो मैं इस उत्तर पोस्ट और आशा है कि यह अधिक लोगों को कर सकते हैं।