Media Events Not Working in Safari/Chrome

[realph]

I’ve got an alert that pops up when the video on said page plays and finishes. Any reason why this is no longer working in Safari/Chrome? It was working as recently as about 2 months ago.

$(document).ready( function() {
    var v = document.getElementsByTagName("video")[0];
    v.addEventListener("playing", function() { 
       alert("Video has started");
    });

    v.addEventListener("ended", function() { 
       alert("Video has ended");
    });
});

Still works perfectly fine in Firefox.

Any help is appreciated. Thanks in advance.

[g3logic]

Looks like you’re using jQuery. Try using bind() to handle your video events. I have found that adding event listeners in JS for audio/video events can be wonky sometimes.

Try this (note – omit the [0] in the video reference when working with video events):

var v = $('#video');
v.bind('playing', function() {
    alert("Video has started");
});

    v.bind('ended', function() {
    alert("Video has ended");
});

[realph]

@g3logic So do I just replace my code with your code? Do I wrap it in the same .ready() method?

[g3logic]

Yes, just replace the code that you posted with the code that I posted and you should be good to go. Just remember that you cannot refer to video events unless the video element exists. So this code assumes you have a video tag in your html with an id=”video”

Yes, place it inside of the $(document).ready( function() { });

[realph]

@g3logic Again, that seem to be working just fine in Firefox. But no Safari or Chrome. Any idea what the problem may be?

[g3logic]

Any way you could post to CodePen?

[Paulie_D]

Pop-ups disabled?

[realph]

It seemed to be a problem with the HTML5 Player I was using (SublimeVideo) as I tried it on CodePen and it worked perfectly.

http://codepen.io/realph/pen/rfmdz

So, instead of using native .addEventListener‘s, I’m using Sublime’s API and have managed to get it working.

sublime.ready(function(){
    var player = sublime.player('the-video');

    sublime.player('the-video').on({
      start: function(player) { alert("Video has started") },
      end:   function(player) { alert("Video has ended"); }
    });
});

P.S. I probably should have mentioned I was using Sublime in the beginning.

Thanks for all the help @g3logic!

[g3logic]

No problem. Glad you figured it out!

[Author]

Posts