Question

我将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/

Answer 1

不完全确定这是否是你的问题的原因，但你得到了这个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代码

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

1 个答案: