jquery - on play not working when using $(document).on('play', 'video', function(){})

Question

I don't know why on play doesn't work!!!

$('video').on('play', function(){ alert('working'); });

$(document).on('play', 'video', function(){ //not working });

As I know for audio/video we should use get(0) to get the dom but for the second one it hasn't got that, what's your guess/suggestion?

Another approach problem

so it seems nobody knows this so i decided to use click event. In click event I check whether it is paused or not, if it's paused so pause others and play this else pause this one either.

$(document).on('click', 'video', function(){
    if($(this).get(0).paused)
    {
        $(this).get(0).play();
    }
    else
    {
        $(this).get(0).pause();
    }
});

it works in firefox but the problem starts when using chrome or ie. When clicking on video it works but when clicking on play button it doesn't detect click event has triggered!!! how can I fix that?

Answer 1

You can try with javascript solution below:

document.getElementById('vid1').addEventListener('play', function(){ alert('working'); });

Note: "vid1" is the Id of the video element.