0

让我补充一下，我的代码基于http://juanfra.me/2012/08/flexslider-multiple-videos-v2/，但是，我只使用 .slider 而不是 .flexslider 类。

我目前拥有的是 2 个 div，（一个右对齐和一个左对齐），然后通过 JS 附加并添加它们以在不同的 div 之间创建“轮播”效果。每个 div 都有一个 flexslider 实例。

这很好用，但是因为我克隆了 div，所以我不能为它们使用 ID，因为这意味着我克隆了一个 div，然后插入它，瞧，我们有两个元素（至少）具有相同的 ID。

所以基本上，一切都很好，除了调用 .flexslider('play') 或暂停。我也尝试过jQuery('.slider').data('flexslider').flexslider('play')，但无济于事。我也尝试过迭代每个 .slider 并调用.flexslider('play/pause')它。console.log 中也没有消息，这真的很奇怪。拜托，你能指出我正确的方向吗？

我使用 froogaloop-api 来正确控制我在 flexslider 中嵌入的 vimeo-videos，这很有效。

这是我的 HTML 结构的一部分（必须删除某些部分，例如附加类、文本和正确的 vimeo 视频 URL，还要注意 iframe id 是随机的（它们与我在 vimeo 播放器中包含的相同） url 变量，但这无关紧要，因为它是 flexslider 问题）：

<div class="slider customContent">
    <ul class="slides">
        <li>
            <div class="image">
                <iframe id="player_1" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
            </div>

            <div class="post">
                <div class="content">
                    <span class="meta-title">Another title</span>
                </div>
            </div>
        </li>
        <li>    
            <div class="image">
                <iframe id="player_2" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_2" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
            </div>

            <div class="post">
                <div class="content">
                    <span class="title">A title</span>
                </div>
            </div>
        </li>
    </ul>
</div>

这是一个 jsfiddle：http: //jsfiddle.net/DMPpa。

发生了什么：当我播放具有另一个 div 的 ID 的视频时（因为只能有一个 ID），flexslider 拒绝暂停该 id 和视频的特定 flexslider 实例。例如，如果我单击最后一个 flexslide 项目，我想暂停幻灯片并播放视频，而不是暂停幻灯片，并且在一小段时间后 flexslider “幻灯片”到另一个视频项目而不暂停当前播放一。

如果我在每个 iframe 上设置一个唯一的 ID，这可行，但我不能在我的 HTML 中这样做，因为 div 被附加并预先创建以创建轮播效果。

所以我认为我们需要做的是在该 iframe 上的“data-fakeid”中存储一个临时 ID（可能是服务器端生成的），然后遍历每个 iframe 并设置 ID，添加方法，然后删除 ID，因为它必须是唯一的.. 或其他东西。可悲的是，我需要推动这件事。

所以，我试图澄清一些事情。希望您能理解 - 在此先感谢。

4

1 回答 1

1

好吧，所以我最终做了什么（并帮助未来遇到相同“问题”的开发人员，这实际上并不是真正的问题）：

我最终通过javascript生成了ID（因为我正在修改DOM；追加和前置时的div和iframe，因此无法在服务器端完成），然后使用“新”iframe调用Froogaloop addEvent客户端生成的 ID，以及在“新”DOM 结构上重新初始化 flexslider。这是最合乎逻辑的解决方案，但是我太紧张而无法理解这一点。

我的实际问题是，我需要一种方法将 vimeo-videos 的处理程序与 Froogaloop 和 Flexslider 结合起来，而不需要在它们上设置 ID。当在 vimeo 视频 (iframe) 等元素上具有相同的 ID 时，两者都完全不起作用（好吧，它不应该！）。

感谢你们给我的帮助！祝你好运！

于 2013-08-17T20:47:17.863 回答