使用 jquery 隐藏时隐藏 youtube 视频

Question

这里已经有几个类似的问题，但似乎都不适用于我的应用程序。

在我的网站上，我打开了一个带有嵌入式视频的灯箱供用户观看。他们单击缩略图，视频出现在缩略图的右侧。这是我正在使用的 javascript 代码：

$(document).ready(function () { $('.vidframe').hide();

    $('a').click(function () {

        $('.vidframe').hide();
        $('#'+this.id.substr(4)).fadeToggle(400);
    });



});

和 jsFiddle 链接到半工作示例：http://jsfiddle.net/YX8pQ/24/

但是，当从一个视频切换到下一个视频时，视频不会停止。我尝试通过更改将其从 DOM 中删除

$('.vidframe').hide();

到

$('.vidframe').remove();

但是，呃，这会从我的 DOM 中删除所有视频并彻底破坏一切。有没有办法在从一个到另一个单击时隐藏视频，但停止播放和缓冲 iframe？我觉得我在 .remove() 的正确轨道上，但不知道从这里去哪里。

Answer 1

您好，我刚刚看了你的代码。

你一切都好，但电影没有停止的原因只是因为隐藏。设置可见：无；所以他们仍然会玩。

这样做的方法是创建带有一些 ID 的动态 iframe。

当有人点击下一部电影时，它将 .remove() 当前电影。将新的 ID 放在您记得的某个地方。然后在隐藏的 iframe 中重新插入已删除的 iframe，以便它可以预缓冲并在不可见的情况下做好准备。您实际上不应该进行隐藏加载，但如果您不打算分配电影，那很好 - 当您开始预加载数十部电影时才会出现问题。

编辑

好的，所以我基本上把你的代码撕开了，并为它设计了一些结构——我使用的代码也减少了大约 30%——因为我让 jquery 完成了艰苦的工作。

这不会预加载您的电影，因为这是一种非常糟糕的做法，如果您开始添加大量电影，可能会导致您的网站加载“缓慢”。这从字面上替换了点击的那个，淡入淡出并且你可以播放它。

检查你的小提琴的新版本

http://jsfiddle.net/YX8pQ/25/

并阅读这些内容-也许您可以做得更好。

http://code.google.com/apis/youtube/iframe_api_reference.html

Stop all YouTube iframe embeds from playing?