使用Youtube API通过播放另一个来停止视频

Posted 2021-04-15

当我在同一页面上播放另一个视频时，我试图停止etbed youtube视频，我发现：stackoverflow fiddle-example但是当我尝试在我的网页上使用它时它不起作用：my_test

脚本

<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    var $ = jQuery;
    var players = [];
    $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
        if (!this.id) { this.id='embeddedvideoiframe' + k }
        players.push(new YT.Player(this.id, {
            events: {
                'onStateChange': function(event) {
                    if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {
                            if (this.getIframe().id != event.target.getIframe().id) {
                                this.pauseVideo();
                            }
                        });
                    }
                }
            }
        }))
    });
}
</script>

html

One: 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video     player" width="160" height="100" src="http://www.youtube.com/embed    /zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net">    </iframe>
<br/>
Two:
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net">    </iframe>

怎么了？我在谷歌开发者上创建了这个项目，我已经创建了API密钥，但我不知道我必须把它放在哪里。

答案

你忘了添加jquery lib（https://code.jquery.com/）

另一答案

已解决问题是，在示例中，他们使用了“origin”参数，如果设置此参数，则可以避免将恶意第三方javascript代码引入页面，这可以控制YouTube播放器。

SRC = “http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net”

这就是为什么代码在小提琴页面上工作但不在我的工作。所以我用主页的完整URL改变了这个原始路径，现在它可以工作了！