我将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/
答案 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代码