javascript - Youtube 播放器.destroy();抛出 'this.a is null' ，即使在验证播放器时也是如此

Question

所以我有一个带有两个面板的小应用程序。使用 iframe API。单击一个面板将展开面板全屏，并显示带有一些附加信息的“播放视频”按钮。单击左上角的按钮会将 UI 返回到标准状态，关闭视频并将面板缩小到 50/50。

现在我们有两个视频，我已经这样定义了视频，#vidPlayer2 是第二个触发器。

$('#vidPlayer1').on('click', function(){
  player = new YT.Player('player', {
    height: '100%',
    width: '100%',
    videoId: '(video id here)',
    controls: 0,
    showinfo: 0,
    autoplay: 0,
    rel: 0,
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

同样，我们得到了默认的演示代码，稍作修改:

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

var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    done = true;
  }
  if (event.data == YT.PlayerState.ENDED) {
    resetView();
  }
}
function stopVideo() {
  player.stopVideo();
}

然后，我们尝试让按钮起作用。在某些情况下，如果没有单击任何一个 vidPlayer 按钮，则不会定义任何播放器，因此我加入了一个带有一些验证的 if 语句。

var resetView = function() {
  // If a Youtube player is active, make sure we stop it.
  if (player === undefined || !player || null) {
    console.log("Player could not be found.");
  } else {
    player.stopVideo();
    player.destroy();
  }
  // Additional code to reset the UI removed below. Works no matter what if the above code is removed.
};

现在，在大多数情况下，一切正常，直到我尝试进入面板、播放视频、重置 UI，然后尝试在不播放视频的情况下进入和离开下一个面板。当我完全按照这一系列步骤操作时，无论首先启动哪个面板，我都会在控制台中收到 TypeError: this.a is null。我本以为验证可以解决问题，但显然不是。

所以我可以从中区分的是它在初始化时工作正常 - 即 var player 已初始化。返回按钮只是在不播放视频的情况下来回运行。返回按钮在视频正在播放时有效，但如果我们尝试在播放器停止并销毁后直接使用返回按钮，该功能将失败。但是，如果我们简单地弹出另一个视频，它确实有效。

当我尝试重置 View 时是否遗漏了什么？是否必须重新初始化 youtube 播放器？任何帮助或想法将不胜感激。谢谢!

编辑:这是控制台抛出的注释。需要注意的是 main.js:44:5 是 player.stopVideo();调用，而 main.js:70:3 是在 resetView();在单击按钮时被调用。

TypeError: this.a is null
www-widgetapi.js:120:73
f.C
https://s.ytimg.com/yts/jsbin/www-widgetapi-vflWgX7t4/www-widgetapi.js:120:73
V
https://s.ytimg.com/yts/jsbin/www-widgetapi-vflWgX7t4/www-widgetapi.js:112:97
Nb/</this[a]
https://s.ytimg.com/yts/jsbin/www-widgetapi-vflWgX7t4/www-widgetapi.js:130:124
resetView
file:///Users/cipher/Desktop/ERHS_video/js/main.js:44:5
<anonymous>
file:///Users/cipher/Desktop/ERHS_video/js/main.js:70:3
dispatch
file:///Users/cipher/Desktop/ERHS_video/js/jquery-3.2.1.min.js:3:10264
add/q.handle
file:///Users/cipher/Desktop/ERHS_video/js/jquery-3.2.1.min.js:3:8326

Answer 1

这里的问题是播放器不是未定义的。发生的事情是你有一个全局玩家引用，你正在用它做以下事情:

1. 在第一个面板中创建播放器
2. 在第一个面板关闭时销毁它
3. 当第二个面板关闭时，在已经销毁的播放器(从第一个面板)上调用 player.stopVideo()

目前，player 包含对您使用的最后一个 YouTube 播放器的引用，即使该播放器已经被销毁。

您应该做的是在销毁播放器时清除您对播放器的引用。 Destroy 不会(也不能)那样做。您还可以简化 if 条件，因为 !player 会自行检查 null 和 undefined:

var resetView = function() {
  // If a Youtube player is active, make sure we stop it.
  if (!player) {
    console.log("Player could not be found.");
  } else {
    player.stopVideo();
    player.destroy();
    player = null;  // Clear out the reference to the destroyed player
  }