0

我使用了出色的 jQuery swiper 插件 ( http://www.idangero.us/sliders/swiper/ ) 创建了一个滚动播放器界面，该界面通过“幻灯片”显示内容，每张幻灯片都是一个 <article>。我需要一些幻灯片来显示 Youtube 视频，使用标准的 <iframe> 方法。这在 Safari 和 Chrome 中运行良好，但在 Firefox 中发生了一件奇怪的事情。播放器界面为 760 像素宽（全部位于分配了该宽度的 <section> 元素内），在一个狭窄的窗口中，Firefox 只显示一个黑色矩形而不是 Youtube 视频播放器。但是，如果 Firefox 窗口的宽度为 1521 像素或更宽（即，超过播放器宽度的两倍），

此外，如果我在 Firefox 中右键单击 Youtube 播放器，Flash 上下文菜单会出现在我的屏幕上，位于 Flash 播放器右侧超过 1,000 像素处。

这很奇怪 - 我在http://backattheranch.ca/matt/player/上放了一个演示，供人们浏览。任何帮助，将不胜感激。谢谢！

4

1 回答 1

0

它transform: translate3d();位于 .swiper-wrapper 父元素上。我们遇到了类似的问题，并且在父元素上删除该转换修复了它。

要重新创建这是影响您的问题：

  1. 在您的示例页面上，选择项目#3 - 有一个视频。
  2. 弹出打开 FireBug，选择 div.swiper-wrapper 元素。
  3. 在 CSS 编辑器中，在 element.style 和 .swiper-wrapper 类中“x”出 translate3d。您的视频会消失，但不要害怕！把它带回来并测试这确实是问题所在，

  4. 在 FireBug 编辑器的 element.style 中输入以下 CSS：

    left: -1520px

您的视频将重新出现，您会看到它是可点击的，并且可以播放。

我刚刚查看了 idangero.us 网站，我没有看到有关此问题的更新；看起来他们的播放器使用 translate3d 变换来滑动东西。不幸的是，这意味着您将需要找到一个不同的 swiper 解决方案，它不使用 translate3d 来定位您的元素，或者要求他们修复此问题并等待修复。

我强烈推荐Malsup 的 Cycle 2，如果你被支持视频的滚动条卡住了。非常可扩展，有据可查。您可以在此处查看滑块运行视频的演示，在 Firefox 中运行。

在Malsup Cycle 2 下载中，您会发现支持触控功能的触控友好滑动插件。

我们在Getty 的网站上使用 Cycle 2 ，但不幸的是，我们的滑块目前都没有显示视频。

于 2013-12-11T00:27:19.103 回答