Youtube Iframe 不刷新就无法工作

Question

要重现 Stackblitz 中的问题，请单击 GO 导航到包含 iframe 的组件，它现在有效，然后返回和前进，iframe消失。您必须刷新页面才能再次显示 iframe。

我尝试了一些解决方法：

我试图在 ngOnDestroy window['onYouTubeIframeAPIReady'] = null; 中释放对象但没有成功

这是如何创建的代码iframe

init() {
  var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

ngOnInit() {
  this.init();
  window['onYouTubeIframeAPIReady'] = (e) => {
            this.YT = window['YT'];

            this.player = new window['YT'].Player('player', {
              videoId: '1cH2cerUpMQ'
            });
  };
}

模板

 <div id="player" >
 </div>

有人有成功的解决方法，请分享。

Answer 1

一周后，解决方法有效，但似乎 "dirty"。

事实上，往回走后，函数window['onYouTubeIframeAPIReady']就不再执行了。

所以，我在这个方法中放了一个布尔值，如果它被执行，则重置为 false。然后，通过考虑这个值

，一个函数检查需要在超时 3s 后重新加载

 //this.needToReload = true in constructor

 ngAfterViewInit(){
    let n = 3;
    var intervalId= setInterval(() => {
            n--;
            this.tick = n*10;
            if (n === 0) {
                clearInterval(intervalId);
                if(this.needToReload)
                {
                  location.reload();
                }
            }
        }, 1000);
  } 

ngOnInit() {
    this.init();
    window['onYouTubeIframeAPIReady'] = (e) => {
        this.YT = window['YT'];
        this.needToReload = false;

        this.player = new window['YT'].Player('player', {
          videoId: '1cH2cerUpMQ'
        });
    };
}

Answer 2

您可以检查 youtube api 是否已经初始化，然后创建您的播放器：

player: any;

init() {
  if (window['YT']) {
    this.createPlayer();
    return;
  }

  var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  window['onYouTubeIframeAPIReady'] = () => this.createPlayer();
}

ngOnInit() {
  this.init();
}

createPlayer() {
  this.player = new window['YT'].Player('player', {
    videoId: '1cH2cerUpMQ'
  });
}

ngOnDestroy() {
  window['onYouTubeIframeAPIReady'] = null;
  if (this.player) {
    this.player.destroy();
  }
}

Forked Stackblitz

Answer 3

如果 youtube api 已经存在，您可以销毁并重新初始化；

public player: any;
public YT: any;

init() {
  if (window['YT']) {
    window['YT'] = null;

    if(this.player){
     this.player.destroy();
    }
  this.init();
  }

  var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  window['onYouTubeIframeAPIReady'] = () => this.startVideo();
}

ngOnInit() {
  this.init();
}

startVideo() {
  this.player = new window['YT'].Player('player-youtube', {
  videoId: this.linkVideo,
  playerVars: {
    autoplay: 0,
    modestbranding: 1,
    controls: 0,
    disablekb: 1,
    rel: 0,
    showinfo: 0,
    fs: 0,
    playsinline: 1,
    loop: 0,
    origin: window.location.host,
    host: 'https://www.youtube.com'
  },
  events: {
    'onStateChange': this.onPlayerStateChange.bind(this),
    'onReady': this.onPlayerReady.bind(this),
  }
}

ngOnDestroy() {
  window['onYouTubeIframeAPIReady'] = null;
  if (this.player) {
    this.player.destroy();
  }
}

Forked Stackblitz

Youtube Iframe 不刷新就无法工作

Youtube Iframe can't work without refresh

youtube-iframe-api

angular