Youtube Iframe 不刷新就无法工作答案

【问题标题】：Youtube Iframe can't work without refreshYoutube Iframe 不刷新就无法工作
【发布时间】：2018-11-16 14:48:34
【问题描述】：

要重现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>

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

【问题讨论】：

标签： angular youtube-iframe-api

【解决方案1】：

如果 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

【讨论】：

【解决方案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

【讨论】：

哇，它有效。感谢您提供简单的解决方案。我是角度的新手
22h后奖励你

【解决方案3】：

一周后，一种可行的解决方法，但看起来“脏”。

其实在往复后，函数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'
        });
    };
}

【讨论】：