我正在使用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
不确定是什么导致冲突。
谢谢，
解决方法
我得到这个滑块工作的唯一方法是从bxslider官方网站下载它。并尝试跟随他们的
tutorial如何使响应视频滑块。他们没有提到这些箭头图像的任何地方，因为他们没有进入css。所以，请记住从下载的bxslider zip抓取一个图像文件夹，并将其粘贴到项目的js文件夹中。
在我的最终设置中，我在js文件夹中有4个本地文件：jquery-2.2.2.min.js，jquery.bxslider.css，jquery.bxslider.js和jquery.fitvids.js。 js文件夹还包括images.png和bx_loader.gif的图像子文件夹。
这一切都在HTML文件中被引用如下：
<head>
<link rel="stylesheet" href="js/jquery.bxslider.css">
<script src="js/jquery-2.2.2.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider').bxSlider({
video: true,useCSS: false
});
});
</script>
</head>
<body>
<ul class="bxslider">
<li>
<iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
</ul>
</body>
我已经在iOS设备上测试了我的解决方案，一切似乎都可以正常工作。这个问题有一些类似的solution，你也可以看看。