Youtube播放按钮在iphone上消失

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

 
Heres a youtube video:
And here's a html5 video:

这里是jsfiddle的行动。

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

我怎么能解决这个问题?

请注意,我的目标是能够在移动平台上播放video。

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

iframe一个id或class,

  

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

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

您可以使用以下任何页面事件, pageshowpagebeforeshowpagehidepagebeforehide

演示 (1)

(1)在iPhone 5 iOS 7.0.4上测试 – Safari Mobile。

最佳做法是在加载完成时重新加载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"); }); 

试试看。 希望它有用!