एचटीएमएल 5 वीडियो टैग

Question

के साथ नेटवर्क्स_NO_SOURCE त्रुटियों को कैसे पकड़ें यदि < स्रोत> एचटीएमएलवीडियो> टैग के लिए प्रदान किए गए टैग> टैग खेलने योग्य हैं, तो मैं एक त्रुटि प्रदर्शित करना चाहता हूं।

this page on the Mozilla Developer Network के अनुसार, ऐसा लगता है कि मुझे किसी भी स्रोत को लोड करने के लिए वीडियो तत्व की नेटवर्कस्टेट संपत्ति की जांच करनी है, क्योंकि प्रत्येक पृथक स्रोत टैग लोड होने में विफल होने पर अपनी त्रुटि फेंकता है।

To detect that all child elements have failed to load, check the value of the media element's networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

लेकिन मुझे किस बिंदु पर नेटवर्कस्टेट की जांच करनी चाहिए? अगर मैं video_tag.load() को कॉल करने पर तत्काल जांचता हूं, तो यह हमेशा मुझे बताता है कि नेटवर्कस्टेट नेटवर्क्स_NO_SOURCE है, भले ही स्रोत तत्व मान्य हैं और वीडियो ठीक खेलता है। इसलिए, मुझे लगता है कि ब्राउज़र तक स्रोत टैग की कोशिश किए जाने तक मैं प्रतीक्षा करने के लिए hvae। loadstart, loadedmetadata, loadeddata निम्नलिखित परिणामों के साथ & त्रुटि (फ़ायरफ़ॉक्स में):

var state = this._video_tag.networkState;  
console.log('networkState', state); 
if(state == this._video_tag.NETWORK_NO_SOURCE) 
{ 
    throw new Error('No valid sources'); 
} 

मैं अमान्य स्रोत टैग के साथ निम्नलिखित वीडियो तत्व घटनाओं के सभी की कोशिश की है:

यहां परीक्षण है

• loadstart: कहा जाता है लेकिन networkState
• loadedmetadata NETWORK_LOADING है:
• loadeddat नहीं बुलाया एक: नहीं बुलाया
• त्रुटि:, अगर मैं Firebug में वीडियो टैग की जाँच

नहीं बुलाया हालांकि, networkState NETWORK_NO_SOURCE बस के रूप में की उम्मीद है।

वीडियो टैग की जांच करने के लिए मुझे किस घटना का उपयोग करना चाहिए, या यह करने का एक बेहतर तरीका है?

Answer 1

मैंने वीडियो की नेटवर्क स्थिति की जांच करने के लिए इसे sth का उपयोग किया। आप स्रोत टैग उपयोग कर रहे हैं आप के बजाय सूची में अंतिम स्रोत टैग पर onerror विशेषता सेट कर सकते हैं इस अधिकारी W3C एचटीएमएल 5 पेज (http://dev.w3.org/html5/spec/Overview.html#the-video-element)

<script> 
function failed(e) { 
    // video playback failed - show a message saying why 
    switch (e.target.error.code) { 
    case e.target.error.MEDIA_ERR_ABORTED: 
     alert('You aborted the video playback.'); 
     break; 
    case e.target.error.MEDIA_ERR_NETWORK: 
     alert('A network error caused the video download to fail part-way.'); 
     break; 
    case e.target.error.MEDIA_ERR_DECODE: 
     alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.'); 
     break; 
    case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: 
     alert('The video could not be loaded, either because the server or network failed or because the format is not supported.'); 
     break; 
    default: 
     alert('An unknown error occurred.'); 
     break; 
    } 
} 
</script> 
<video src="tgif.vid" autoplay controls onerror="failed(event)"></video> 

Answer 2

से लिया जाता है। अधिक जानकारी के लिए the bottom of section 4.8.8 on this page देखें। कि संदर्भ से

उद्धरण:

If the author isn't sure if user agents will all be able to render the media resources provided, the author can listen to the error event on the last source element and trigger fallback behavior:

<script> 
function fallback(video) { 
    // replace <video> with its contents 
    while (video.hasChildNodes()) { 
    if (video.firstChild instanceof HTMLSourceElement) 
     video.removeChild(video.firstChild); 
    else 
     video.parentNode.insertBefore(video.firstChild, video); 
    } 
    video.parentNode.removeChild(video); 
} 
</script> 
<video controls autoplay> 
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"' 
     onerror="fallback(parentNode)"> 
... 
</video> 

यह उदाहरण है क्योंकि आप घटना वस्तु की तरह तुम करते हो जब onerror विशेषता (वीडियो टैग पर है जो तभी काम करता है आप नहीं मिलता है सही नहीं है टैग की एक श्रृंखला में वीडियो टैग में एक स्रोत विशेषता। हालांकि, मेरा मानना ​​है कि आप उस टैग पर नेटवर्कस्टेट जेएस वैरिएबल के साथ वीडियो टैग से त्रुटि स्थिति पुनर्प्राप्त कर सकते हैं। मैंने इसका परीक्षण नहीं किया है। तो यह है उस बिंदु पर आप पर निर्भर करता है। ऐसा लगता है कि मेरे पास आपकी ज़रूरतों के लिए संतोषजनक हो सकता है।

नोट्स:

जबकि आप अंतिम स्रोत टैग पर "त्रुटि" ईवेंट सुन सकते हैं, मैंने पाया कि यह अविश्वसनीय था। ऐसे मामलों में जहां प्रीलोड विशेषता किसी के लिए सेट नहीं है, मुझे घटना से निकालने से पहले घटना के लिए श्रोता रूप से विश्वसनीय रूप से जोड़ने का कोई तरीका नहीं मिला। इसने मुझे आतंकवादी विशेषता का उपयोग करने के लिए मजबूर किया।

यदि आपको इस नोट को जोड़ने के लिए ईवेंट को विश्वसनीय रूप से सुनने का कोई तरीका मिल गया है। this Chromium issue के अनुसार स्रोत टैग पर त्रुटि ईवेंट बबल नहीं है जिसका अर्थ है कि आपको उस विशिष्ट टैग पर इसे सुनना होगा।

Answer 3

'त्रुटि' घटना को नहीं कहा जाता है क्योंकि यह तत्वों द्वारा ट्रिगर किया जाता है, और ईवेंट को तत्व पर भी ट्रिगर करने के लिए, आपको addEventListener विधि का उपयोग करने के लिए उपयोग करने के लिए कैप्चर पैरामीटर सेट सही है, इस तरह :

video.addEventListener('error', callback, true); 

और फिर कॉलबैक अंदर आप networkState संपत्ति है, जो NETWORK_NO_SOURCE होने के लिए अगर वीडियो स्रोतों नहीं खेल सकते जा रहा है देख सकते हैं।

बाहर चेक addEventListener के बारे में MDN से डॉक्स और useCapture पैरामीटर https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener