एचटीएमएल 5 वीडियो। Attr

Question

के बजाय स्रोत तत्व के साथ प्लेबैक त्रुटि लौटाना मैं एक साधारण HTML5 वीडियो तत्व में कुछ त्रुटि हैंडलिंग जोड़ना चाहता हूं। इम कोड के इस टुकड़ा जो हर जगह दिखाई देता है online का उपयोग कर:

जे एस

function playbackFailed(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; 
    } 
} 

एचटीएमएल

<video id="a" src="tgif.vid" autoplay controls onerror="playbackFailed(event)" poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400"></video> 

से ऊपर ठीक काम करता है और मैं एक तेज़ चेतावनी बॉक्स मिल पृष्ठ लोड होने ।

हालांकि अगर मेरे पास "src" विशेषता नहीं है और इसके बजाय <source><video> तत्व "आतंक (घटना)" के भीतर टैग का उपयोग नहीं किया जाता है? उदाहरण मार्कअप:

<video id="b" autoplay controls onerror="playbackFailed(event)" poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400"> 
    <source src="tgif.vid"> 
</video> 

नोट मैंने आईड्स "ए" और "बी" के ऊपर दोनों वीडियो तत्व दिए हैं।

कोई व्याख्या कर सकते हैं क्यों निम्नलिखित कोड में:

<script> 
var a = document.getElementById('a'); 
var b = document.getElementById('b'); 

a.addEventListener('error', function(e){alert('error event on a')}); 
b.addEventListener('error', function(e){alert('error event on b')}); 

</script> 

मैं केवल के लिए "एक" और नहीं "बी"

मैं <source> टैग का उपयोग करने के रूप में मैं होगा की जरूरत है एक चेतावनी मिल विभिन्न उपकरणों के लिए कई मीडिया प्रकार आदि

कोई जवाब/टिप्पणियों

के लिए अग्रिम धन्यवाद

एस

Answer 1

यदि स्रोत शामिल हैं, errors in loading sources must be caught from the <source> elements स्वयं। हालांकि, यह जांचने के लिए कि <source> तत्व विफल हुए हैं, check the <video> element's networkState property यदि यह NETWORK_NO_SOURCE है।

पर और विवरण यहां निम्नलिखित:

• HTMLMediaElement
• <source>
• Using HTML5 audio and video

Here's a sample code जब पहली स्रोत लोड करने के लिए विफल रहता है और कंसोल में एक त्रुटि आउटपुट:

एचटीएमएल

<video id="b" autoplay controls poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400"> 
    <source src="tgif.vid" /> 
    <source src="http://html5doctor.com/demos/video-canvas-magic/video.mp4" /> 
    <source src="http://html5doctor.com/demos/video-canvas-magic/video.webm" /> 
    <source src="http://html5doctor.com/demos/video-canvas-magic/video.ogg" /> 
</video> 

जे एस (संचालकों का उपयोग कर inine स्क्रिप्ट से बचने के लिए)

var sources = document.getElementsByTagName('source'), 
    i; 

for (i = 0; i < sources.length; i++) { 
    (function (i) { 
     sources[i].addEventListener('error', function (e) { 
      console.log('Error loading: '+e.target.src); 
     }); 
    }(i)); 
}