Question

让我只是添加我的代码来自http://juanfra.me/2012/08/flexslider-multiple-videos-v2/，但是，而不是类.flexslider，我只使用.slider。

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

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

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

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

这是我的HTML结构的一部分（必须删除某些部分，如其他类，文本和正确的vimeo视频网址，还要注意iframe ID是随机的（它们与我在其中包含的相同） vimeo player-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。

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

如果我在每个iframe上设置一个唯一的ID，这是可行的，但我不能在我的HTML中这样做，因为div会被追加并预先创建旋转木马效果。

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

所以，我试着澄清一些事情。希望你明白 - 提前谢谢。

Answer 1

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

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

我的实际问题是我需要一种方法来附加vimeo-videos的处理程序以及Froogaloop和Flexslider，而无需在其上设置ID。两者都完全不起作用（好吧，它不应该！）在vimeo视频（iframes）等元素上具有相同的ID。

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

flexslider的多个实例没有设置ID - 不能使用flexslider api

1 个答案: