HTML5视频无法在iPad上使用jquery bxSlider插件

我正在使用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，你也可以看看。

原文地址：https://www.jb51.cc/html5/168930.html

HTML5视频无法在iPad上使用jquery bxSlider插件

解决方法

相关推荐