Question

我正在开展一个项目，我必须播放Vimeo视频，并且我更愿意使用PrettyPhoto库。

当我打开Vimeo视频然后它产生错误“错误加载页面”并且之后视频播放顺利没有任何错误时，问题就出现了。我想要迎合这种情况。

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

任何帮助？我被困了。

Answer 1

这就是我的解决方案：通过jQuery，它可以检测移动设备，并通过适用于手机的Vimeo网站的相应链接替换嵌入式Vimeo视频播放器。

1 - 检测移动

我刚从Detect Mobile Browsers（网络公司）下载了一个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 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一样）

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

1 个答案: