html5视频结束时触发.changePage()，iOS答案

【问题标题】：Trigger .changePage() when html5 video ends, iOShtml5视频结束时触发.changePage()，iOS
【发布时间】：2011-06-02 18:31:43
【问题描述】：

这是一个可以在 Android (v2.2) 和各种桌面浏览器（Chrome、FF）上完成工作的 sn-p。问题出在 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进行nuking解决了关闭视频的问题（我刚刚添加了容器）：

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

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

【问题讨论】：

有什么错误吗？它在控制台/调试中说什么
相关：stackoverflow.com/questions/2954595/html5-video-callbacks/… 和 stackoverflow.com/questions/2994680/…
控制台中没有错误消息。 OP 更新以反映此信息。谢谢，

标签： ios jquery-mobile html5-video

【解决方案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>

【讨论】：

【解决方案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'));
});

【讨论】：

我没有成功访问 .progress 方法。日志显示undefined undefined undefined
hmm 另一种方法是使用 click() 并在完成后单击完成按钮