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

我让这个滑块工作的唯一方法是从bxslider官方网站本地下载它。并尝试按照tutorial关于如何制作响应式视频滑块。他们没有提到这些箭头图像的任何地方，因为他们没有进入CSS。所以，记得从下载的bxslider zip中获取一个images文件夹并将其粘贴到项目的js文件夹中。

在我的最终设置中，我在js文件夹中有4个本地文件：jquery-2.2.2.min.js，jquery.bxslider.css，jquery.bxslider.js和jquery.fitvids.js。 js文件夹还包含images子文件夹，其中controls.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，您也可以查看它。

Answer 2

尝试更改

的位置

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

我可能是由于图书馆的冲突，把它放在所有剧本的中间或底部或任何地方，我确信它能够工作。

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

2 个答案: