YouTube IFrame播放器API onStateChange

时间:2018-02-26 13:06:02

标签: javascript reactjs ecmascript-6 youtube-api youtube-javascript-api

iPhone Safari version 9.3.2chrome上,当我将其检查到移动设备时,当我滚动滑块时甚至当我在不同的浏览器标签之间导航时iframe闪烁可见,尽管封面图像是"在顶部"。 似乎问题来自缓冲状态,因为当我切换标签并返回页面时,它将值更新为3(缓冲),显示视频一毫秒,然后显示背面图像封面。
有没有办法避免它?

反应代码:

 const VideoState = {
   UNSTARTED: -1,
   ENDED: 0,
   PLAYING: 1,
   PAUSED: 2,
   BUFFERING: 3,
   CUED: 5
 };

 this.state = {
   player: null,
   showCover: true,
   videoInitialised: false
 };

onStateChange(event) {
   const { showCover } = this.state;

   if (this.coverTimeout && event.data === VideoState.BUFFERING) {
      window.clearTimeout(this.coverTimeout);
    } 
    if ((event.data === VideoState.PLAYING || event.data === VideoState.BUFFERING) && showCover) {
       this.setState({
         showCover: false
      });
    } else if ((event.data === VideoState.PAUSED || event.data === VideoState.ENDED || event.data === VideoState.UNSTARTED) && !showCover) {
       this.coverTimeout = window.setTimeout(() => {
           this.setState({
            showCover: true
       });
    }, 250);
  }
}

0 个答案:

没有答案