Jquery UI 选项卡重置内容答案

【问题标题】：Jquery UI Tabs reset contentJquery UI 选项卡重置内容
【发布时间】：2012-09-26 20:32:57
【问题描述】：

我在 Jquery UI 中设置了三个选项卡，每个选项卡都包含一个 Youtube 嵌入。

一切正常，除了每当我在一个标签中启动一个视频并想切换到另一个标签时，前面的视频不会自动停止。

换句话说，我需要 JQUI 在用户导航到下一个时停止播放所有以前的标签内容，否则会发生重叠（在这种情况下为声音）。

这可能吗？任何帮助表示赞赏。

html结构如下：

<div class="tabs">
    <div class="tabs-navi">
        <ul>
            <li><a href="spip.php?article1">Commercial</a></li>
            <li><a href="spip.php?article5">Fiction</a></li>
            <li><a href="spip.php?article4">Experimental</a></li>
        </ul>
    </div><!--.tabs-navi-->
</div><!--#tabs-->

【问题讨论】：

嵌入是什么样的？
嗨，乔恩，该网站是：pierredesmaraismusik.com（视频和音乐子部分是我的 Q 中涉及的部分）
我用html结构更新了Q。每个 href 实际上是一篇包含这样一个 iframe 的文章：youtube-nocookie.com/embed/…" frameborder="0" allowfullscreen>

标签： jquery windows jquery-ui tabs

【解决方案1】：

您可以查看使用 popcorn.js 并使用 YouTube 播放器来显示视频，然后只需连接到选项卡控件的 select 事件，然后在相关的爆米花播放器上调用 pause。

【讨论】：

【解决方案2】：

到目前为止我看到的问题：

因为当前页面显示视频并隐藏另外 2，最好将它们删除或隐藏在 DOM 树中
多个 div 元素使用相同的 id 属性值，每个 id 在同一页面上应该是唯一的
iframe 视频嵌入代码存在一些问题 Internet Explorer，整个页面有时会变黑... Firefox 和 Chrome 没有这个问题，如果你关心的话兼容IE，还是用旧的比较好对象嵌入方法

【讨论】：