我正在使用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
不确定是什么导致了冲突。
谢谢,
发布于 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,你也可以研究一下。
发布于 2016-03-30 20:20:38
尝试更改的位置
`<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`
我可能是由于库的冲突,把它放在所有脚本的中间或底部或任何地方的elc,我相信它会工作的。
发布于 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
复制相似问题