Trigger .changePage() when html5 video ends, iOS

Question

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 :)

related: http://stackoverflow.com/questions/2954595/html5-video-callbacks/2954618#2954618 and http://stackoverflow.com/questions/2994680/accessing-html-5-video-progress-event-with-jquery — Phill Pafford, Jun 02 '11 at 20:16
No error messages in the console. OP update to reflect this information. Thanks, — Jeff Hines, Jun 02 '11 at 20:22

score 1 · Accepted Answer · answered Jun 04 '11 at 20:07

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>

score 0 · Answer 2 · answered Jun 02 '11 at 20:32

0

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'));
});

answered Jun 02 '11 at 20:32

Phill Pafford

83,471
91
263
383

I haven't had any success accessing the .progress method. The log shows `undefined undefined undefined` – Jeff Hines Jun 02 '11 at 20:35
hmm another method would be to use the click() and click the done button when finished as well – Phill Pafford Jun 02 '11 at 20:51

Trigger .changePage() when html5 video ends, iOS

2 Answers2

Linked