javascript - YouTube API被销毁后将不会加载其他播放器

Question

我检查了以前的帖子，但找不到与atm类似的问题。

我正在尝试使用两种不同的API(Vimeo和YouTube)嵌入视频。视频订单未遵循提供者结构。而且还将有一个自动播放功能。例如，从YouTube播放2个视频，然后从vimeo播放，然后向YouTube等播放。可以通过单击下一个按钮来触发，或者在当前视频结束时加载下一个按钮。

弄清楚Vimeo的api还不错，它只是简单的1个类轮代码，但我真的很喜欢YouTube。

问题是我无法在第一个YouTube视频之后加载另一个YouTube视频。如果它是在页面加载时加载的，则仅适用于第一个视频。

同样奇怪的是，如果我尝试使用此代码加载其他视频，则会收到控制台错误，提示说

TypeError: this.f is null    www-widgetapi.js:362:22

这不是我嵌入的内容，可能来自YT API。

这是我要构建的代码片段。

我也尝试使用onYouTubeIframeAPIReady调用window.onYouTubeIframeAPIReady = function(){}，但同样得到了相同的结果。

// Global Variables
let ytPlayer, vmPlayer // player wrappers
let playingNow // array with provider(YT/VM), ID and a genre string
let upNext // similar array with the upcoming video

// == Player Destroyer == 
function destroyer() {
    if (playingNow.provider === 'YT' ) {
        // destroy YT
        ytPlayer.destroy()
    } else if (playingNow.provider === 'VM') {
            vimPlayer.destroy().then(function() {
                // the player was destroyed
            }).catch(function(error) {
                // an error occurred
            });
        }
}

// == PlayerCreator ==
function playerCreator(provider, id, genre) {

    // 1. Load the matching provider api player loader

    if (provider === 'YT') {

        // Create YT Player

        onYouTubeIframeAPIReady = function(){
            ytPlayer = new YT.Player('propWrap', {
              videoId: id,
              events: {
                'onReady': onPlayerReady
              }
            });
          }

        playingNow = upNext;
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        playingNow = upNext;
        return console.log(`loaded ${id} for ${provider} have some ${genre}`)

    } else if ( provider === 'VM' ) {

        // Create VM Player
        let options = {
            id: id,
            }
        vimPlayer = new Vimeo.Player('propWrap', options);
        playingNow = upNext;
        return console.log(`loaded ${id} for ${provider} have some ${genre}`)

    } else {
        console.log(`you failed at something`)
    }

    // 3. figure out how to implement autoplay
};

很抱歉，如果这些看起来有点困惑。让我知道您是否想看一下代码的其他部分(或者说没有意义)

Answer 1

因此，我取得了进展，但不确定其背后的逻辑是什么。我在脚本文档的顶部全局添加了function onYouTubeIframeAPIReady(){};，并在播放器创建者中删除了onYoutubeIFrameAPIReady函数。因此，如果第一个视频是vimeo，我可以按任意顺序销毁并重新创建和播放。但是，如果我要加载的第一个视频出现错误，那就是YT.Player is not a constructor