Youtube 嵌入 API 和外部 JS

Question

我已经阅读了 YouTube API 的基础知识，并且它可以毫无问题地在我的网页上运行。但是我希望能够使用视频的状态来触发或停止我在外部 JS 文件中编写的某些功能。非常感谢任何帮助！

目前，我在 iframe 本身之后将以下内容嵌入到我的 HTML 文件中：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady(){
    player = new YT.Player('MyVideoID',{
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event){
    event.target.playVideo();
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        var slideTimeMS = 10000; /* This is a variable which exists in my external file which I would like the player state to manipulate
    }
}

上面的代码本身可以正常工作，但正如我之前所说，我想将它移动到外部文件中，例如，我可以在播放视频时暂停轮播等，其功能已经在说JS文件。

谁能告诉我如何才能成功地在另一个文件中访问它？

非常感谢您的帮助！

标记

Answer 1

对于任何这可能会有所帮助的人，这是我最终找到的解决方案：

iframe 像往常一样嵌入在 HTML 中，但没有在 HTML 中完成任何 JS。在我的 JS 文件中，我有以下内容：

var myPlayerState;
$(function(){
    var yt_int, yt_players={},
        initYT = function() {
            $("IDOrClassOfMyVideo").each(function() {
                yt_players[this.id] = new YT.Player(this.id,
                {
                    events: {
                        'onReady' : onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            });
        };

    $.getScript("//www.youtube.com/player_api", function() {
        yt_int = setInterval(function(){
            if(typeof YT === "object"){
                initYT();
                clearInterval(yt_int);
            }
        },500);
    });

那么其余代码中的函数就可以正常工作了！

Answer 2

这里有几个选项：

1. 将代码移动到与其他 JS 函数相同的文件中。
2. 将代码移动到其自己的文件中，并在包含其他 JS 函数的文件之后使用 脚本标签将其导入。
3. 使用像requirejs这样的JS文件/模块加载器

Answer 3

this article 对我很有用

window.onYouTubeIframeAPIReady = function() {
    window.player = new window.YT.Player(iframeId, {
        ......
    });
}