Unable to bind the video events using Jquery

Question

I am using a video tag and binding it using bind or live .In both cases it not working .Below is my code May be am doing something wrong and not able to catch it.

            <video width="videoWidth"
            height="videoHeight"
            poster="../Poster/poster.png"
            id="videoId"
            controls="controls"
            muted="true"    
            seeking="true"
            paused="true"   >

            <source src="../video/trailer.mp4" type="video/mp4"/>               
            <source src="../video/trailer.ogv" type="video/ogv"/>
            <source src="../video/trailer.webm" type="video/webm"/>
                Your browser does not support the video tag.
            </video>

Here is the JS file include for binding the events.

$("#videoId").bind('ended',function() {
            alert("Entered");
        });

UPDATE

I am updating previous JS and now its working for all Video Events.Now I stucked at error Event where Event will fire based on Event code.May be I am wrong while writing the code but error event not working.Below is my JS

$(document).ready(function(){
        $("#videoId").bind('play',function() {
            alert("Play");
        });

        $("#videoId").bind('canplay',function() {
            alert("Can Play");
        });

        $("#videoId").bind('empited',function() {
            alert("Empited");
        });

        $("#videoId").bind('ended',function() {
            alert("Ended");
        });

        $("#videoId").bind('loadstart',function() {
            alert("Load Start");
        });

        $("#videoId").bind('pause',function() {
            alert("Pause");
        });

        $("#videoId").bind('playing',function() {
            alert("Playing");
        });

        $("#videoId").bind('progress',function() {
            alert("Progress");
        });

        $("#videoId").bind('suspend',function() {
            alert("Suspend");
        });

        $("#videoId").bind('volumechange',function() {
            alert("Volume");
        });

        $("#videoId").bind('waiting',function() {
            alert("waiting");
        });
        $("#videoId").bind('error',function(e,ui) {
            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;
           }
            //alert("Error Code : "+event.target.error.code);
        });

        });

In Console am getting 'Get '.

Answer 1

Try using:

$("#videoId").bind('error',function(e,ui) {...function here...}, true);

This should at least throw your error handler, but the error is probably of higher propogation. The next step will be pinpointing the actual error. This link should help:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Answer 2

This will alert all objects in the error object on the video element

$("video").on("error", function(err) {
    for (var i in err.currentTarget.error) {
        alert(i + ": " + err.currentTarget.error[i]);
    }
});