通过FancyBox 2.0.4,HTML5视频无法在iPhone上播放

时间:2012-01-28 02:20:21

标签: jquery iphone fancybox html5-video

我将HTML5视频加载到隐藏的div中,通过使用FancyBox 2.0.4的图像点击调用该视频。我已经成功地将HTML5视频与桌面,mac和pc上的几乎所有浏览器一起使用FancyBox(即便如此)。然而,随着iPhone(我不知道Android)视频似乎加载但是当你点击播放按钮没有任何反应。我知道该视频适用于iOS,因为当您直接链接到它时,它没有任何问题。

我用这行代码调出视频:

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="#movie"><img src="images/sm/dm_rollover.jpg" alt="" name="Image1" width="175" height="175"></a>

和视频代码:

<video id="movie" width="900" height="506" preload controls>
<source src="video/Demo.m4v"/>
<source src="video/Video/Demo.mov" type="video/mp4"/>

我知道iPhone不会播放大于640×480的视频,我正在使用参考电影(.mov)来解决这个问题,允许在iPhone兼容版本和全尺寸视频之间进行快速自动选择。 / p>

有人能指出我正确的方向来解决这个问题吗? http://danielmease.com/

1 个答案:

答案 0 :(得分:0)

不完全确定这是否是你的问题的原因,但你得到了这个js错误

Error: video is null
Source File: http://danielmease.com/
Line: 120

我假设你有这个脚本

<script>
 var video = document.getElementById('video');
 video.addEventListener('click',function(){
  video.play();
 },false);
</script>

当您没有getElementById('video')的任何选择器时,您正在尝试id="video"。根据您的代码,它应该是getElementById('movie'),不应该是?

通常其他js错误可能会破坏fancybox js代码