当html5视频结束时触发.changePage(),iOS [英] Trigger .changePage() when html5 video ends, iOS

查看:333
本文介绍了当html5视频结束时触发.changePage(),iOS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以下是在Android(v2.2)和各种桌面浏览器(Chrome,FF)上完成工作的代码段。问题在于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.

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

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.

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

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.

编辑:

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

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

加价

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

另一个编辑:

Nuking包含<$ c的div $ c>< video> 标签解决了关闭视频的问题(我刚才添加了容器):

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

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

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

推荐答案

删除< video> 容器会回答关闭视频的问题:

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>

这篇关于当html5视频结束时触发.changePage(),iOS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆