使用 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，如果浏览器是移动设备，则该属性为真。

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）