Youtube播放按钮在iphone上消失

Question

我有以下简单的两页html doc,它使用Jquery Mobile:

<div data-role="page" id="main_page">
    <ul id="test" data-role="listview">
        <li><a href="#page_1" data-transition="slide">Video</a>

        </li>
        <li><a href="#page_1" data-transition="slide">Video</a>

        </li>
    </ul>
</div>
<div data-role="page" id="page_1" data-theme="a">Heres a youtube video:
    <div id="youtubeVideo" data-theme="a" class="ui-content">
        <iframe class="youtube-player" type="text/html" width="100%" src="http://www.youtube.com/embed/cTl3U6aSd2w" frameborder="0"></iframe>
    And here's a html5 video:
    <video width="100%" controls>
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">Your browser does not support the video tag.</video>
</div>

这里是jsfiddle的行动.

在Iphone上,如果您从第一页导航到第二页并播放YouTube视频,则所有内容均按预期工作.但是,如果您点击浏览器的后退按钮,然后再次导航回到YouTube视频,您会看到该窗口是黑色的,无法再次播放该视频.

我怎么能解决这个问题？

请注意,我的目标是能够在移动平台上播放视频.

Answer 1

iframe一旦您再次访问该页面或离开该页面,您需要重新加载.

给iframe一个id或者班级,

<iframe class="youtube-player" type="text/html" width="100%" src="http://www.youtube.com/embed/cTl3U6aSd2w" frameborder="0"></iframe>

克隆它并用其克隆替换现有的.

$(document).on("pagebeforeshow", "#page_1", function () {
  var iframe_clone = $(".youtube-player").clone();
  $(".youtube-player").replaceWith(iframe_clone);
});

您可以使用以下任一页面的事件,pageshow,pagebeforeshow,pagehide和pagebeforehide.

演示 ⁽¹⁾

^{(1)在iPhone 5 iOS 7.0.4上测试 - Safari Mobile.}