CODEWITHSUNDEEP
javascriptjquerymobile-safarihtml5-video
raimondious
raimondious

Reputation: 11

iPad 1 fires video ended event before the video finishes playing

I have a container with a video element and a navigation menu. The nav is hidden until the video finishes playing, at which point the video is hidden and the navigation becomes visible. This works perfectly on the desktop. However, on the iPad, the video does not get to finish playing before the "ended" event apparently finishes.

Also, because you can't autoplay a video element in iOS, I also catch the play event to hide the controls after the video has started. I left this in, just in case someone knows an issue it causes. It still happens with that bit removed though.

Is there a work around for this behavior? I could not find anything about this issue. It seems to me that the video plays with some lag, and the ended event fires after the calculated duration, regardless of how long it actually takes to complete, although this is just speculation. The only thing I'm sure of is that the video is not done playing when the ended event fires. I am testing on an iPad 1 running Safari on iOS 5.

<div id="home-nav">
    <video autoplay controls width="870" height="489" id="home-video">
        <source src="home_1.mp4" type="video/mp4" />
    </video>
    <div id="nav-overlay">
        <a class="link" href="#">Link 1</a>
        <a class="link" href="#">Link 2</a>
        <a class="link" href="#">Link 3</a>
        <a class="link" href="#">Link 4</a>
    </div>
</div><!-- /home-nav -->

$(function(){
    var overlay = $('#nav-overlay');
    var homevideo = $('#home-video');
    overlay.hide();
    homevideo.bind('ended', function(){
        homevideo.hide();
        overlay.show();
    });
    homevideo.bind('play', function(){
        homevideo[0].removeAttribute("controls");
        homevideo[0].currentTime = 0.1;
    });
});

Upvotes: 1

Views: 392

Answers (1)

Jon Shipman
Jon Shipman

Reputation: 11

For starters, bind is deprecated. Switch to on().

$(function(){
    var overlay = $('#nav-overlay');
    var homevideo = $('#home-video');
    overlay.hide();

    homevideo.on('ended', function(){
        $(this).hide();
        overlay.show();
    });

    homevideo.on('play', function(){
        $(this).removeAttribute("controls");
        $(this).get(0).currentTime = 0.1;
    });
});

Try that.

Upvotes: 1

Related Questions