Geek Answers Handbook

HTML 5 video. Returning a playback error using the source element instead of attr

I want to add some error handling to a simple HTML5 video element. I use this piece of code that appears everywhere online :

Js

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; } }

HTML

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

The above works fine, and when the page loads, I get an instant warning window.

However, if I do not have the "src" attribute and instead use the <source> in the <video> element, "onerror (event)" does not fire? Layout Example:

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

Note. I gave both elements of the video above the identifiers "a" and "b".

Can someone explain why in the following code:

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

I get a warning only for "a" and not "b"

I need to use the <source> , since I will have several types of media for different devices, etc.

Thanks for any answers / comments.

S

+7
source share
1 answer

If sources are involved, errors in the download sources must be detected by the <source> elements themselves . However, to check if all <source> elements have worked, check the <video> element networkState if it is NETWORK_NO_SOURCE .

More on this below:

Here is an example code when the first source does not load and displays an error in the console:

HTML

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

JS (using handlers to avoid internal scripts)

 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)); }
+9
source

More articles:


All Articles