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

我正在使用Jquery bxSlider插件为iPad创建图片和视频的滑块图库。我使用HTML5视频标签的视频实现：当自身，然而，当与滑块的标记合并时，不能播放视频HTML5视频无法在iPad上使用jQuery bxSlider插件

<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

不知道是什么原因造成的冲突。

感谢，

来源

2011-08-30 Joe Caplin

测试链接已损坏：/ –

尝试用类似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>

来源

2012-01-04 17:39:49 Matt

我得到这个滑块工作的唯一方法是从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子文件夹，其中有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，你也可以看看它。

来源

2016-03-29 14:48:02 alljamin

尝试改变的

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

的位置我的是它是由于图书馆的冲突，把它或底部或任何ELC所有的脚本中，我相信它戈纳工作。

来源

2016-03-30 12:20:37

回答

相关问题