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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/html5/168930.html

猜你在找的HTML5相关文章