我正在使用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>