Javascript Youtube嵌入API和外部JS

我已经阅读了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文件中

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

非常感谢你的帮助

---

标记以下是一些选项：

将代码移动到与其他JS函数相同的文件中。 将代码移动到它自己的文件中，并在包含其他JS函数的文件之后使用脚本标记导入它。 使用JS文件/模块加载程序，如

---

以下是一些选项：

将代码移动到与其他JS函数相同的文件中。 将代码移动到它自己的文件中，并在包含其他JS函数的文件之后使用脚本标记导入它。 使用JS文件/模块加载程序，如

---

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

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);
    });

---

然后代码其余部分中的函数正常工作

对于任何可能有帮助的人，我最终找到了以下解决方案：

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);
    });

---

然后代码其余部分中的函数正常工作

嗨，阿里兹尔。非常感谢你的建议。我对选项1的问题——当然，这是我的首选选项——是它似乎不起作用。如果我把上面的代码放到我的js文件中，我不会得到任何结果。我想我遗漏了一些东西，可能是如何在html文件中引用iframe和API。当您尝试这样做时，控制台中是否会出现任何错误？如果我能看到整个js文件是什么样子的，那会有帮助的。非常感谢你的建议。我对选项1的问题——当然，这是我的首选选项——是它似乎不起作用。如果我把上面的代码放到我的js文件中，我不会得到任何结果。我想我遗漏了一些东西，可能是如何在html文件中引用iframe和API。当您尝试这样做时，控制台中是否会出现任何错误？如果我能看到整个js文件的样子会有所帮助。我在这么多站点上使用YT嵌入API遇到了很多麻烦，因为我想将功能与DOM分离。这是跨站点的最佳解决方案。谢谢我在这么多站点上使用YT嵌入API时遇到了很多麻烦，因为我想将功能从DOM中分离出来。这是跨站点的最佳解决方案。谢谢