HTML5 Determine the type of error when trying to download the video using the source element.

Question

I just found out some differences between error handling when loading a video using the src tag of the <video> element and processing errors when loading a video using the <source> element.

For example, if I try to download a video stream that is not found (HTTP 404) using the src tag of the video element, an event is fired and the element stores error data:

HTML

 <video src="http://not.found.url"></video> 

Js

 var video = document.querySelector('video'); video.addEventListener('error', function(evt) { console.log(evt.target.error); // Object }); video.load(); 

The video element stores the MediaError object in error :

 error: { code: 4, message: 'MEDIA_ELEMENT_ERROR: Format error' } 

However, when I try to load the same video stream using the source element:

HTML

 <video> <source src="http://not.found.url"> </video> 

Js

 var video = document.querySelector('video'); var source = document.querySelector('source'); video.addEventListener('error', function(evt) { // This event is not triggered console.log(evt.target.error); // null }); source.addEventListener('error', function(evt) { console.log(evt.target.error); // null }); video.load(); 

The error handler of the source element is the only one that catches the error, but error data is not stored anywhere. Neither the video element nor the source element store the error object, so I can say that the error was caused, but I can not find out the type of this error.

I would like to use the source element and be able to determine if the cause of the error is an invalid video format, 404 resource, or any other reason.

Is it possible?

Thanks!

Answer 1

Sorry, but error codes will not help you with HTTP errors. However, the correct way to get the error code when using the <source> elements is as follows:

 <video class="video" autoplay controls> <source src="http://example.com/does-not-exist"> <source src="http://example.com/corrupted-video"> <source src="http://example.com/unsupported-video"> </video> <script> var video = document.querySelector("video"); var source = document.querySelector("source:last-child"); // <source> elements are processed one by one until a usable source is found // if the last source failed then we know all sources failed video.addEventListener("error", function(e) { console.log("<video> error"); console.log(e.target.error); // e.target would be the <video> element // e.target.error -- https://html.spec.whatwg.org/multipage/media.html#mediaerror }); source.addEventListener("error", function(e) { console.log("<source> error"); // e does not contain anything useful -- https://html.spec.whatwg.org/multipage/media.html#event-source-error // e.target would be the <source> element // e.target.parentNode would be the <video> element // e.target.parentNode.error -- https://html.spec.whatwg.org/multipage/media.html#mediaerror // e.target.parentNode.networkState -- https://html.spec.whatwg.org/multipage/media.html#dom-media-networkstate console.log(e.target.parentNode.error); console.log(e.target.parentNode.networkState); }); </script> 

Although this approach does not indicate HTTP errors, you can get more information:

• Checking if an error was generated using <source> or <video>
• Looking for error and networkState