logo标签列表

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

ipadhtmlvideoslider
16

我正在使用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 不确定是什么原因导致了冲突。
谢谢，
测试链接已经失效：/ - Yoav Aharoni
3个回答
3
我唯一能让这个滑块工作的方法是从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，你也可以参考一下。
2
尝试更改位置
 `<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`

也许是由于库的冲突，将其放在所有脚本的中间、底部或任何其他位置，我相信它会起作用。

0

尝试使用像Firebug或Safari开发者工具这样的调试工具查看视频元素。 您可能需要使用PC / Mac浏览器才能完成此操作。 查看jQuery脚本运行后，视频元素是否丢失任何属性或添加额外内容。 由于移动设备上大约有820亿个不同的浏览器和操作系统版本，所以涉及视频的移动开发非常棘手。 如果您看到视频元素已更改，则需要添加一个将其恢复为iPad上可视内容的脚本。

您还可以确保正确包装您的视频。 看起来该滑块脚本需要以下格式：

<div id="slideshowcontainer">
 <div>slide1 content</div>
 <div>slide2 content</div>
 <div>etc...</div>
</div>

OR

<ul id="slideshowcontainer">
 <li>slide1 content</li>
 <li>slide2 content</li>
 <li>etc...</li>
</ul>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接