在延迟加载新视频后停止其他视频 - jQuery 和 youtube API答案

【问题标题】：Stop other videos after lazyload new one - jQuery and youtube API在延迟加载新视频后停止其他视频 - jQuery 和 youtube API
【发布时间】：2017-02-20 06:34:44
【问题描述】：

我的场景 - Codepen（别忘了向下滚动）

我正在使用 lazyframe plugin 延迟加载我的 youtube iframe 视频。单击播放按钮后，每个视频都会添加到 DOM。包含一个 onAppend 函数，该函数在创建新的视频 iframe 后触发（请查看我创建的笔）。

开始一个新视频后如何停止其他视频？

我在 onAppend 函数中添加了一个警报，以检查它是否正常工作。 onAppend 部分看起来像

    onAppend: function(e) {
        alert('onAppend after Lazyframe Function');                    
    }

我还设法包含了以下脚本

    <script src="http://www.youtube.com/player_api"></script>
    <script src="http://www.youtube.com/iframe_api"></script>

embed youtube url 的末尾部分也包含了启用 API 的部分

    &enablejsapi=1

每个 iframe 都有一个唯一的 id

    <iframe id="lazyframe-6hgVihWjK2c" src="https://www.youtube.com/embed/6hgVihWjK2c/?autoplay=1" allowfullscreen="" class="test-vidx" frameborder="0"></iframe>

我们将不胜感激。

【问题讨论】：

标签： javascript jquery iframe youtube-api

【解决方案1】：

我从您所说的内容中得知，您正在同时加载许多玩家的页面。如果是这样，您会发现它们彼此独立。

如果是这样，那么您就希望在任何时候都只玩一场。

我唯一能想到的就是设置一个动态变量，将当前选定玩家的 ID 加载到其中。然后，当您选择播放不同的视频时，您使用 ID 变量向旧视频发送停止命令。然后使用新的视频播放器 ID 更新变量。但是我不确定您将如何获取 ID，因为来自 api 调用的嵌入式播放器似乎没有。

最好使用可以提供 ID 的独立播放器。这是相关的link

【讨论】：

【解决方案2】：

如果它像旧的lazyYT，我只是在lazyYT js代码的点击事件中添加了这两行，它似乎工作得很好:)

        $(<loaded-video-class-name>).lazyYT();
        $(<loaded-video-class-name>).removeClass(<loaded-video-class-name>);

基本上，onclick 会在之前加载视频的任何元素中重新加载视频缩略图，并通过在初始点击时删除添加的类来重置元素以返回其初始状态。

【讨论】：