HTML 5 Video. Returning playback error with source element instead of attr

Question

I'm looking to add some error handling to a simple HTML5 video element. Im using this chunk of code which 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>

Above works fine and I get a snappy alert box when the page loads.

However if i dont have a "src" attribute and instead use the <source> tag within the <video> element "onerror(event)" doesn't fire? Example markup:

<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've given both videos elements above the ids "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 only get an alert for "a" and not "b"

I need to use the <source> tag as I'll have multiple media type for different devices etc.

Thanks in advance for any answers / comments

S

Solution

If sources are involved, errors in loading sources must be caught from the <source> elements themselves. However, to check if all of the <source> elements failed, check the <video> element's networkState property if it's NETWORK_NO_SOURCE.

More details on the following here:

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

Here's a sample code when the first source fails to load and outputs an error into 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 inine 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));
}

Comments

[sidarcy]

Hi Joseph the network state for the above is "3" and the video plays. If I put dummy videos into the above example thus resulting in a fail. It is still 3. I actually need to display the error.

[Joseph]

@sidarcy hmm... try inspecting the error (that's the e in the handler). As far as I have tested, an error in the <source> does not mean an error in <video> (video's error property is null). I haven't gone that far with error trapping in videos.

[AJ Richardson]

The link for networkState doesn't quite work right. It should be: developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/…