延迟jQuery Mobile转换以隐藏嵌入式Youtube视频

时间:2011-07-22 11:28:39

标签: youtube jquery-mobile

我正在使用jQuery Mobile创建一个网站,该网站将在其中一个页面上显示嵌入的YouTube剪辑。

我的问题是,当用户尝试导航到另一个页面时,嵌入的对象会在转换过程中保持“覆盖”页面。结果是视频在第二页上出现了一瞬间,看起来不太好。

我在点击链接时尝试在视频上使用.hide()并尝试创建超时但无效 - 有人可以推荐解决方案吗?

3 个答案:

答案 0 :(得分:0)

您必须从页面中删除实际视频;这也发生在每个浏览器上,因为Flash通常出现在所有其他内容上。

答案 1 :(得分:0)

事实证明我没有捕捉到正确的事件 - 当我需要绑定到这样的'tap'事件时,我正在检查点击:

$("#link").live('tap',function(){
   $("#video").hide();
});

答案 2 :(得分:0)

您可以使用'pagebeforehide'事件删除Flash视频,但您也可以使用youtube的iframe嵌入方法来显示视频而不是嵌入标记(我没有使用iframe方法遇到持久性Flash对象的问题)

$('#youtube_page_id').live('pagebeforehide', function () {
    $('#youtube_embed_id').remove();
});
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">

在youtube上使用iframe方法的另一个好处是youtube将检测用户所在的设备并显示正确类型的视频。例如,如果用户在iPhone上,那么youtube将显示HTML5视频而不是Flash视频。