Question

以下是在Android（v2.2）和各种桌面浏览器（Chrome，FF）上完成工作的代码段。问题在于iOS，它会愉快地提醒，但不会更改页面。

似乎在等待用户点击完成按钮，我想避免。我知道这是可以实现的，因为有人尝试使用iOS 4，在我使用代码的过程中，它对他们有用 - 所以我知道这是可能的。

最终结果是在html5视频播放完毕后跳过完成按钮，以显示内容页面，最好使用jQuery-Mobile。

修改

我在控制台中没有出现任何错误，无论是FireBug还是Chrome。我现在想知道是否有办法在没有“内置”播放器的情况下强制播放视频，我假设我无法控制通过JS或其他方式。

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

标记：

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

非常感谢任何帮助。：）

另一个编辑：

让包含<video>标签的div解决了关闭视频的问题（我刚才添加了容器）：

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

满足最终结果的要求~~，但看起来有点笨拙 - 东西反弹了一下。我仍在寻找一个可靠的解决方案。~~ - @Phill Pafford，感谢您的帮助:)）

Answer 1

删除<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>

Answer 2

尝试添加如下元素类型：

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

当html5视频结束时触发.changePage（），iOS

2 个答案: