Trigger .changePage() when html5 video ends, iOS

问题

Here is a snippet that gets the job done on Android (v2.2) and various desktop browsers (Chrome, FF). The issue lies with iOS, which will happily alert, but won't change the page.

It seems to be waiting for the user to click the Done button, which I would like to avoid. I know this is possible to achieve, because someone tried it, using iOS 4, during a point where I was mucking with the code, and it worked for them - so I know it's possible.

The end result is to skip the Done button after an html5 video has finished playing, to display a content page, preferably using jQuery-Mobile.

Edit:

I don't get any errors in the console, be it FireBug or Chrome. I am now wondering if there is a way to force the video to be played without the "built-in" player, of which I am assuming I have no control over via JS or otherwise.

JavaScript:

    var v = $('#movie');

    //what happens after the video is over?
    v.bind('ended',function(){
      alert("The video will close, and a content page will show.");
      $.mobile.changePage($('#lamps'));
    });

Markup:

    <div data-role="page" id="home">
        <video id="movie">
            <source src="video/vid_name.mv4" />
        </video>
    </div>

    <div data-role="page" id="lamps">
        <div>...</div>
    </div>

Any help would be greatly appreciated. :)

Another Edit:

Nuking the div containing the <video> tag solves the problem of closing the video (I added the container just now):

    $('video#movie').bind('ended',function(){
        $('#vid_container').remove();
        $.mobile.changePage($('#lamps'));
    });

The requirement for the end result is met~~, but seems a bit hacky - stuff bounces around a bit. I am still looking for a solid fix.~~ -- @Phill Pafford, thanks for your help :)

回答1:

Removing the <video> container answers the question of closing the video:

<!DOCTYPE html> 
<html> 
<head> 
 ...
<script>
    $('video#movie').bind('ended',function(){
        $('#vid_container').remove();
        $.mobile.changePage($('#lamps'));
    });
</script>
</head>
<body>
    <div data-role="page" id="home"> 
        <div id="vid_container"> 
            <video id="movie" controls>
                 <source src="video/vid_name.mv4" />
            </video>
        </div>
    </div>

    <div data-role="page" id="lamps">
     ...
    </div>
</body>
</html>

回答2:

Try adding the element type like this:

$('video#movie').bind('progress',function(e){
    console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable );
});

$('video#movie').bind('ended',function(){
    alert('The video will close, and a content page will show.');
    $.mobile.changePage($('#lamps'));
});

来源：https://stackoverflow.com/questions/6218752/trigger-changepage-when-html5-video-ends-ios

标签

ios

jquery-mobile

html5-video