Search code examples
safarihtml5-video

Safari html5 video timeupdate event gets disabled


We are playing videos from a server. We attach an 'ontimeupdate' event which fires periodically, as the video plays. For slow connections, we can compare where the video currently IS, to where it SHOULD be. Then we can do some other things we need to do, if it is lagging. Everything works fine in Chrome, FF, IE. In Safari, when the connection is slow, the event only fires twice. Why does it get removed? Is there a way to add the event again, inside of the handler for the event? Thanks


Solution

  • The HTML5 audio/video element is still less than perfect. The biggest issues I've noticed is that it doesn't always behave the same way in every browser. I do not know why the timeupdate event stops firing in Safari, but one option you have is to monitor whether the video is playing or not and verifying the information independently. Example,

    $(video).bind('play', function() {
        playing = true;
    }).bind('pause', function() {
        playing = false;
    }).bind('ended', function() {
        playing = false;
    })
    
    function yourCheck() {
        if (playing) {
            if (video.currentTime != timeItShouldBe) {
                //do something
            }
        } else {
            return;
        }
        setTimeout( yourCheck(), 100);
    }
    

    Something to that effect. Its not perfect, but neither is the current HTML5 audio/video element. Good luck.