Youtube播放按钮在iphone上消失了答案

【问题标题】：Youtube play button disappears on iphoneYoutube播放按钮在iphone上消失了
【发布时间】：2013-12-15 12:13:30
【问题描述】：

我有以下使用 Jquery Mobile 的简单两页 html 文档：

<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 视频，您会看到窗口是黑色的，并且无法再次播放视频。

我该如何解决这个问题？

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

【问题讨论】：

我欠你 250 个代表，如果你想设置赏金，请告诉我 :)

标签： jquery iphone jquery-mobile youtube youtube-api

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

Demo ⁽¹⁾

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

【讨论】：

【解决方案2】：

最佳做法是在加载完成时再次重新加载 src 属性：

我在 iframe 中使用谷歌地图在地图页面上完成的示例：

$(document).delegate('.ui-page', 'pageshow', function () {
    $("#mapframe").attr("src","https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=624+Hill+Farm+Lane+Springfield,+PA&aq=&sll=39.930274,-75.289307&sspn=0.289068,0.580215&ie=UTF8&hq=&hnear=624+Hill+Farm+Lane+Springfield,+Pennsylvania 19064&t=m&ll=39.923297,-75.352306&spn=0.063191,0.109863&z=10&output=embed&iwloc");
});

在你的情况下：

$(document).delegate('.ui-page', 'pageshow', function () {
    $(".youtube-player").attr("src","http://www.youtube.com/embed/cTl3U6aSd2w");
});

试一试。希望成功！

【讨论】：