Question

这里有几个类似的问题，但似乎没有一个适用于我的应用程序。

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

$（document）.ready（function（）{ $（ 'vidframe'）隐藏（）;

    $('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做了很多努力。

这不会预装您的电影，因为这是一种非常糟糕的做法，如果您开始添加大量电影，可能会导致您的网站“慢慢”加载。这实际上取代了点击的一个，淡入你可以播放它。

检查小提琴的新版本

并阅读这些内容 - 也许你将能够做得更好。