Unable to bind Error event for Video element - html

Question

I have a video tag,below is html
<video id="videoId" controls="controls">
<source src="../video/trailer.mp4" type="video/mp4" />
</video>
I want to add onError event on this video element .I have write the code that fire but its not work how can I bind it.May be I am missing somethng
window.onerror=function(){
var myvid = document.getElementById('videoId');
if (myvid.error) {
switch (myvid.error.code) {
case myvid.error.MEDIA_ERR_ABORTED:
alert("You stopped the video.");
break;
case myvid.error.MEDIA_ERR_NETWORK:
alert("Network error - please try again later.");
break;
case myvid.error.MEDIA_ERR_DECODE:
alert("Video is broken..");
break;
case myvid.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert("Sorry, your browser can't play this video.");
break;
}
}
}
Thanks in advance for help.

Answer 1

well, i m not sure if you can get the error over the window element... but if you look in the html5 specififation here: http://www.w3.org/TR/2010/WD-html5-20100624/video.html#video , you ll find following script block:
<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>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p>Download the video file.</p>

Answer 2

Important is, the loading error occurs not on the video tag, but on source tags inside video tag, and the event must be attached to src attribute of source tag, then you can use parentNode.id to address the proper video tag and do something with the error when it occurs and exactly where it occurs.
I use a serie of numbered video tags and an array with Popcorn.js objects to handle videos on page.
There is my solution here:
$("source").error(function () {
var tagStr = this.parentNode.id;
var pop = videos[tagStr.charAt(str.length-1)];
if (pop.media.networkState == pop.media.NETWORK_NO_SOURCE) {
doSomething;
}
}).attr("src");