首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5视频不能在iPad上使用jquery bxSlider插件

HTML5视频不能在iPad上使用jquery bxSlider插件
EN

Stack Overflow用户
提问于 2011-08-31 02:11:07
回答 3查看 1.9K关注 0票数 16

我正在使用Jquery bxSlider插件为iPad创建一个包含图像和视频的滑块库。我使用HTML5视频标签来实现视频:

代码语言:javascript
复制
<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/

如果我删除此脚本:

代码语言:javascript
复制
<script src="js/jquery.bxSlider.js" type="text/javascript"></script>

从源代码来看,视频可以在iPad上运行。

删除了bxSlider脚本的测试链接: http://www.ekimmedia.com/totem/TIC/MG/index10.html

不确定是什么导致了冲突。

谢谢,

EN

回答 3

Stack Overflow用户

发布于 2016-03-29 22:48:03

我让这个滑块工作的唯一方法是从bxslider官方网站本地下载它。并尝试按照他们的tutorial如何制作响应式视频滑块。他们在任何地方都没有提到这些箭头图像,因为它们不在css中。因此,记得从下载的bxslider压缩包中抓取一个图像文件夹,并将其粘贴到项目的js文件夹中。

在我的最终设置中,我在js文件夹中有4个本地文件:jquery-2.2.2.min.jsjquery.bxslider.cssjquery.bxslider.jsjquery.fitvids.js。js文件夹还包括controls.pngbx_loader.gif所在的images子文件夹。

然后在HTML文件中引用这些内容,如下所示:

代码语言:javascript
复制
<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,你也可以研究一下。

票数 3
EN

Stack Overflow用户

发布于 2016-03-30 20:20:38

尝试更改的位置

代码语言:javascript
复制
 `<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`

我可能是由于库的冲突,把它放在所有脚本的中间或底部或任何地方的elc,我相信它会工作的。

票数 2
EN

Stack Overflow用户

发布于 2012-01-05 01:39:49

尝试使用firebug或safari developer tools等调试工具查看视频元素。您可能需要使用PC/Mac浏览器来执行此操作。查看video元素是否丢失了任何属性,或者在jquery脚本运行后添加了额外的内容。我做过一些涉及视频的移动开发,我可以告诉你,这是非常敏感的,特别是在移动设备上大约有820亿种不同的浏览器和操作系统版本的情况下。如果您看到视频元素发生了更改,则需要添加一个脚本,使其返回到iPad上可见的内容。

你也可以确保你的视频是正确包装的。看起来这个滑块脚本需要以下格式:

代码语言:javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7247790

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档