Home/ Questions/Q 5996053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:02:52+00:00

Here is a snippet that gets the job done on Android (v2.2) and various

  • 0

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 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0