使用jquery在移动设备中播放Vimeo视频

Question

我正在做一个项目，我必须播放Vimeo视频，并且我优先使用PrettyPhoto库。

当我打开Vimeo视频时，问题就出现了，然后它会生成错误"加载页面时出错"，之后视频会顺利播放，没有任何错误。我想解决这种情况。

我调查这是因为Jquery（版本1.6.2）引用和Jquerymobile引用。

有什么帮助吗？我被它卡住了。

Answer 1

我的解决方案就是这样做的：通过jQuery，它检测移动设备，并通过移动电话Vimeo网站的适当链接替换嵌入式Vimeo视频播放器。

1-检测移动

我刚从Detect Mobile Browsers（dotcom）下载了一个jQuery脚本，并在加载jQuery后将其添加到我的网站上。

<script language="javascript" type="text/javascript"
  src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script language="javascript" type="text/javascript" src="[path]/detectmobilebrowser.js"></script>

此脚本将创建一个新属性jQuery.browser.mobile，如果浏览器是移动设备，则该属性将为true。

2-通过指向正确视频的Vimeo for Mobile的适当链接替换所有Vimeo iFrame

这就是代码。只要把它放在jQuery的ready函数中，就完成了。你也可以把它放在一个函数里，如果你愿意的话，随时启动函数。

if (jQuery.browser.mobile == true) {
$('iframe').each(function() {
if ($(this).attr('src').indexOf('http://player.vimeo.com') != -1) {
var videoiFrame;
videoiFrame = {
height : $(this).height(),
width: $(this).width(),
src : $(this).attr('src')
}
// Find video code
var videoCode = videoiFrame.src.split('?');
videoCode = videoCode[0];
videoCode = videoCode.split('/');
videoCode = videoCode[(videoCode.length -1)];
// videoCode found, now replace iFrame
$(this).before('<a class="mobile-video"
  style="width: '+ videoiFrame.width +'px ; height: '+ videoiFrame.height+'px;
    line-height: '+ videoiFrame.height+'px;"
  href="http://www.vimeo.com/m/'+ videoCode + '"></a>');
$(this).remove();
}
});
}

就是这样。在诺基亚Lumia 800（它没有Flash，就像iphone一样）上成功测试了