Youtube player.destroy（）;抛出'this.a为null'，即使在验证玩家时也是如此 [英] Youtube player.destroy(); throws 'this.a is null', even when validating player

问题描述

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

So I've got a small app with two panels. Using the iframe API. Clicking on one panel will expand the panel full screen, as well as showing a 'play video' button with some additional information. Clicking a button in the top left will return the UI to it's standard state, closing down the video and shrinking the panels back to fit 50/50.

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

Now as we've got two videos, I've defined the videos as such, #vidPlayer2 being the second trigger.

$('#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
    }
  });

同样，我们有一个默认的演示代码，只做了一些小修改：

Similarly, we've got the default demo code, with a small modification:

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 按钮，没有定义任何玩家，所以如果我扔了带有一些验证的声明。

Then, we're trying to get the button to work. In some circumstances, not having clicked one of the vidPlayer buttons, no player is defined, so I threw in an if statement with some validation.

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为null 。我会假设验证会完成这个技巧，但显然不是。

Now for the most part, things work well UNTIL I try to go into a panel, play a video, reset UI, then try to enter and leave the next panel without playing a video. When I follow this exact series of steps, regardless of what panel starts first, I get a TypeError: this.a is null in console. I would've assumed that the validation would've done the trick, but apparently not.

所以我可以区别于它，它在初始化时工作正常 - 即var播放器已初始化。返回按钮可以在不播放视频的情况下来回切换。当视频正在播放时，返回按钮会起作用，但如果我们尝试在播放器停止和销毁后直接使用返回，则该功能会失败。但是，如果我们只是打开另一个视频，它确实有用。

So what I can distinguish from this is it works fine when initialized - i.e. var player is initialized. The return button works through just going back and forth without playing a video. The return button works when a video is actively playing, but the function fails if we try to use the return directly after the player is stopped and destroyed. It does work if we simply pop open another video, however.

当我试图重置视图时，是否有一些我缺少的东西？ youtube播放器是否必须重新初始化？任何帮助或想法将不胜感激。谢谢！

Is there something I'm missing when I'm trying to reset the view? Does the youtube player have to be reinitialized? Any help or thoughts would be greatly appreciated. Thanks!

编辑：这是控制台抛出的注释。需要注意的是main.js：44：5是player.stopVideo（）; call和main.js：70：3是resetView（）;按下按钮调用。

This is the note that's being thrown by the console. Something to note is main.js:44:5 is the player.stopVideo(); call, and main.js:70:3 is when resetView(); is called on a button click.

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

推荐答案

这里的问题是玩家不是未定义。发生了什么事情，你有一个全球玩家参考，你正在做以下事情：

The problem here is player is NOT undefined. What's happening is you have a global player reference, and you're doing the following with it:

1. 在第一个面板中创建一个玩家


2. 第一个面板关闭时销毁它


3. 当第二个面板关闭时，在已经销毁的播放器（从第一个面板）上调用player.stopVideo（）

目前，播放器包含对您最后一位YouTube播放器的引用即使该玩家已经被摧毁，也可以使用is。

Currently, player holds a reference to whatever the last YouTube player you were using is, even if that player has already been destroyed.

你应该做的是在你摧毁它时清除对玩家的引用。毁灭不会（也不可能）这样做。您还可以简化if条件，因为！player 将自行检查null和undefined：

What you should be doing is clearing out your reference to the player when you destroy it. Destroy won't (and can't) do that. You can also simplify your if condition since !player will check for null and undefined on its own:

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
  }

这篇关于Youtube player.destroy（）;抛出'this.a为null'，即使在验证玩家时也是如此的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！