HTML5 视频不适用于 iPad 上的 jquery bxSlider 插件
Posted
技术标签:
【中文标题】HTML5 视频不适用于 iPad 上的 jquery bxSlider 插件【英文标题】：HTML5 video won't work with jquery bxSlider plugin on iPad 【发布时间】：2011-11-07 01:08:57 【问题描述】：我正在使用 Jquery bxSlider 插件为 iPad 创建一个包含图像和视频的滑块库。我正在使用 html5 视频标签来实现视频：
<video 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
不确定是什么导致了冲突。
谢谢，
【问题讨论】：
测试链接断开：/ 【参考方案1】：尝试使用调试工具（如 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>
【讨论】：
【参考方案2】：让这个滑块工作的唯一方法是从 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" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe src="YOUR_LINK_TO_VIDEO" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
</ul>
</body>
我已经在 ios 设备上测试了我的解决方案，一切似乎都运行良好。有一些类似solution这个问题，你也可以看看。
【讨论】：
【参考方案3】：尝试改变位置
`<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`
我是因为库冲突，把它放在所有脚本的中间或底部或任何地方，我相信它会起作用。
【讨论】：
以上是关于HTML5 视频不适用于 iPad 上的 jquery bxSlider 插件的主要内容，如果未能解决你的问题，请参考以下文章
UIWebView 的 allowInlineMediaPlayback 属性在 iPad 上的 4.2 上不起作用