当前位置：文江博客话题详情

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

发布于 2024-12-02 10:02:17 字数 840 浏览 0 评论 0 原文

我正在使用 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

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

谢谢，

原文

I'm using the Jquery bxSlider plugin to create a slider gallery of images and video for the iPad. I'm using the HTML5 video tag for video implementation:

<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>

Video source code works fine on iPad when on its own, however when merged with slider markup, the video does not play.

Test link: http://www.ekimmedia.com/totem/TIC/MG/

If I remove this script:

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

from the source code, the video then works on iPad.

Test link with bxSlider script removed: http://www.ekimmedia.com/totem/TIC/MG/index10.html

Not sure what is causing the conflict.

Thanks,

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

絕版丫頭 2024-12-09 10:02:17

我让这个滑块工作的唯一方法是从 bxslider 官方网站本地下载。并尝试按照他们的教程了解如何制作响应式视频滑块。他们没有在任何地方提到这些箭头图像，因为它们不在 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" 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 设备上测试了我的解决方案，一切似乎都工作正常。这个问题有一些类似的解决方案，你也可以研究一下。

The only way how I get this slider to work was to download it locally from the bxslider official website. And try to follow their tutorial on how to make responsive video slider. They do not mention anywhere about these arrow images as they do not come in the css. So, remember to grab an images folder from the downloaded bxslider zip and paste it into js folder of your project.

In my final setup I have had 4 local files in js folder: jquery-2.2.2.min.js, jquery.bxslider.css, jquery.bxslider.js and jquery.fitvids.js. js folder also included images subfolder where were controls.png and bx_loader.gif.

This all was then referenced in HTML file as follows:

<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>

I have tested my solution on iOS device and everything seems to work fine. There is somewhat similar solution to this problem, you can also look into it.

回复收藏 0 原文

行雁书 2024-12-09 10:02:17

尝试更改

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

我的位置，因为这是由于库冲突，将其放在所有脚本中间或底部或任何 elc 中，我确信它会起作用。

Try to change the position of

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

my be it is due to confliction of libraries, put it in middle of all scripts or in bottom or anywhere elc, i am sure it gona work.

回复收藏 0 原文

執念 2024-12-09 10:02:17

尝试使用 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>

Try viewing the video element with a debugging tool like firebug or safari developer tools. You may have to use a PC/Mac browser to do this. See if the video element loses any attributes, or gets extra things added after your jquery script runs. Having done some mobile development involving videos I can tell you it is very touchy, especially since there are approximately 82 billion different browsers and OS versions floating around on mobile devices. If you see that the video element is changed, then you will need to add a script that takes it back to something viewable on your iPad.

You might also make sure your videos are wrapped correctly. It looks like this slider script requires the following format:

<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 原文

~没有更多了~

关于作者

绿光

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。