懒惰后停止其他视频-JQuery和YouTube API

Question

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

IM使用LazyFrame插件来延误我的YouTube Iframe视频。单击"播放"按钮后，每个视频都会添加到DOM中。创建新视频之后，有一个onappend函数wich get triggerd（请查看我创建的笔）。

启动新的视频？

如何停止其他视频

我在Onappend函数中发出警报，以检查它是否正常。append部分看起来像

    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>

嵌入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>

任何帮助都将不胜感激。

Answer 1

我从您所说的话中拿走，您同时加载了许多玩家的页面。如果是这样，您发现它们彼此独立。

如果是这样，那么您就只想一次只能玩一个。

我唯一能想到的是设置一个动态变量，您将当前选择的播放器的ID加载到中。然后，当您选择播放其他视频时，您使用ID变量将停止命令发送到旧视频。然后使用新的视频播放器ID更新变量。但是，我不确定您将如何抓住ID，因为API呼叫的嵌入式播放器似乎没有一个。

最好的是使用一个独立的玩家，您可以将ID提供给。这是相关链接

Answer 2

如果像旧的lazyyt一样，我只是在lazyyt JS代码的单击事件中添加了这两行，它似乎运行良好：）

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

基本上，它将在以前加载视频的任何元素内重新加载视频缩略图，并在初次单击时删除添加的类以返回其初始状态，然后重置元素。