How to Catch NETWORK_NO_SOURCE Errors with an HTML5 Video Tag

Question

If none of the < source > tags provided for an HTML5 < video > tag are playable, I want to display an error.

According to this page on the Mozilla Developer Network, it seems I have to check the networkState property of the video element to see if any sources loaded, as each seperate source tag throws its own error when it fails to load.

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.

But at what point should I check the networkState? If I check immediately on calling video_tag.load(), it always tells me the networkState is NETWORK_NO_SOURCE even if the source elements are valid and the video plays fine. Therefore, I assume I hvae to wait until the source tags have been tried by the browser.

Here's the test:

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

I have tried all of the following video element events with invalid source tags: loadstart, loadedmetadata, loadeddata & error with the following results (in Firefox):

• loadstart: called but networkState is NETWORK_LOADING
• loadedmetadata: not called
• loadeddata: not called
• error: not called

However, if I check out the video tag in Firebug, the networkState is NETWORK_NO_SOURCE just as expected.

What event should I be using to control when to check the video tag, or is there a better way of doing this?

Answer 1

If you are using source tags you can set the onerror attribute on the last source tag in the list instead. See the bottom of section 4.8.8 on this page for more details.

Quote from that reference:

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>

This example isn't perfect because you don't get the event object like you do when the onerror attribute is on the video tag (which only works if you have a src attribute in the video tag instead of in a series of tags. However, I believe you can then retrieve the error state from the video tag with the networkState JS variable on that tag. I haven't tested that though. So it is up to you at that point. It sounds like what I have here might be satisfactory for your needs.

Notes:

While you can instead listen for an "error" event on the last source tag, I found that this was unreliable. In cases where the preload attribute is not set to none, I could not find a way to reliably add a listener for the event before the event fired. This forced me to use the onerror attribute.

If you do find a way to reliably listen for the event I wanted to add this note. According to this Chromium issue the error event on the source tag does NOT bubble which means that you have to listen to it on that specific tag.

Answer 2

i used sth this to check network status of the videos. this is taken from official w3c html5 page ( 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 3

The 'error' event is not called because it is triggered by the elements inside, and to make the event be triggered also on the element, you have to use the addEventListener method with the useCapture parameter set to true, like this:

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

And then inside the callback you can check the networkState property, which is going to be NETWORK_NO_SOURCE if the video cannot play the sources.

Check out the docs from MDN about addEventListener and the useCapture parameter https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener