未知的竞争条件:有时会触发onError-Youtube Iframe API

时间:2019-05-26 13:39:21

标签: javascript reactjs youtube-javascript-api youtube-iframe-api preact

Here is a fiddle to demonstrate

多次运行小提琴,您将看到以下消息 Yay we got the error 150仅在某些时候出现。我希望该错误每次都会出现。

我立即componentDidMount加载YT API

function loadYTIframeAPI() {
  var tag = document.createElement("script");
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

ajax请求完成后,我会实例化播放器

new window.YT.Player(`player${id}`, {
  events: {
    onReady: e => {
      console.log("onReady", e.data, e.target.a.id);
      this.setState({ readyData: "ready" });
      if (index === 0) {
        console.log("play");
        e.target.playVideo();
      }
    },
    onError: e => {
      // this should fire every time but only fires sometimes 
      console.log("onError", e.data, id);
      this.setState({ errorData: e.data.toString() });
    }
  }
});

我使用

渲染iframe视频
<iframe id="player512347" src="https://www.youtube.com/embed/AmtOraYA4p0?enablejsapi=1&origin=https://fiddle.jshell.net&autoplay=1" frameborder="0"></iframe>

0 个答案:

没有答案