Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Media Events Not Working in Safari/Chrome

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #146191
    realph
    Participant

    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.

    #146199
    g3logic
    Participant

    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");
    });
    
    #146202
    realph
    Participant

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

    #146203
    g3logic
    Participant

    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() { });

    #146250
    realph
    Participant

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

    #146255
    g3logic
    Participant

    Any way you could post to CodePen?

    #146256
    Paulie_D
    Member

    Pop-ups disabled?

    #146294
    realph
    Participant

    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!

    #146300
    g3logic
    Participant

    No problem. Glad you figured it out!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.