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
不确定是什么导致了冲突。
谢谢,
回答 3
Stack Overflow用户
发布于 2016-03-29 22:48:03
我让这个滑块工作的唯一方法是从bxslider官方网站本地下载它。并尝试按照他们的tutorial如何制作响应式视频滑块。他们在任何地方都没有提到这些箭头图像，因为它们不在css中。因此，记得从下载的bxslider压缩包中抓取一个图像文件夹，并将其粘贴到项目的js文件夹中。
在我的最终设置中，我在js文件夹中有4个本地文件：jquery-2.2.2.min.js、jquery.bxslider.css、jquery.bxslider.js和jquery.fitvids.js。js文件夹还包括controls.png和bx_loader.gif所在的images子文件夹。
然后在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，你也可以研究一下。
Stack Overflow用户
发布于 2016-03-30 20:20:38
尝试更改的位置
`<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`我可能是由于库的冲突，把它放在所有脚本的中间或底部或任何地方的elc，我相信它会工作的。
Stack Overflow用户
发布于 2012-01-05 01:39:49
尝试使用firebug或safari developer tools等调试工具查看视频元素。您可能需要使用PC/Mac浏览器来执行此操作。查看video元素是否丢失了任何属性，或者在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>https://stackoverflow.com/questions/7247790
复制相似问题
腾讯云开发者
