HTML5视频不适用于iPad上的jquery bxSlider插件

Question

我正在使用Jquery bxSlider插件为iPad创建图像和视频的滑块库.我正在使用HTML5视频标签进行视频实施:

<video width="400" height="260" controls>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

视频源代码在iPad上运行正常,但是当与滑块标记合并时,视频无法播放.

测试链接: http ://www.ekimmedia.com/totem/TIC/MG/

如果我删除此脚本:

<script src="js/jquery.bxSlider.js" type="text/javascript"></script>

从源代码开始,视频可以在iPad上运行.

删除了bxSlider脚本的测试链接: http ://www.ekimmedia.com/totem/TIC/MG/index10.html

不确定是什么导致了冲突.

谢谢,

Answer 1

尝试使用 firebug 或 safari 开发人员工具等调试工具查看视频元素。您可能必须使用 PC/Mac 浏览器才能执行此操作。查看视频元素是否丢失任何属性，或者在 jquery 脚本运行后添加额外的内容。在完成了一些涉及视频的移动开发后，我可以告诉您这是非常敏感的，特别是因为移动设备上有大约 820 亿种不同的浏览器和操作系统版本。如果您发现视频元素已更改，则需要添加一个脚本，将其恢复为可在 iPad 上查看的内容。

您还可以确保您的视频包装正确。看起来这个滑块脚本需要以下格式：

<div id="slideshowcontainer">
 <div>slide1 content</div>
 <div>slide2 content</div>
 <div>etc...</div>
</div>

OR

<ul id="slideshowcontainer">
 <li>slide1 content</li>
 <li>slide2 content</li>
 <li>etc...</li>
</ul>