reactjs - 如何在 React 应用程序中将 JWPlayer 或 Plyr.io 用于视频播放器？

Question

我创建一个组件说“视频播放器”并使用来自 Plyr.io 的播放器。使用 handleVideoPlayer 创建用于初始化的句柄。使用 handlePlyrScript 加载的 Plyr 脚本。

这是我的代码：

const VideoPlayer = (props) => {
  return(
    <div className={styles.videoSection}>
      <div className={styles.videoResponsive}>
        <video poster={props.video.poster} id="player" playsInline controls>
          <source src={props.video.source} type="video/mp4" />
        </video>
      </div>
    </div>
  );
}


class PlayerPage extends Component {

  state = {
    currentEpisode : {},
    allPlayList : [],

  }
  // load Plyr script from cdn
   handlePlyrScript = () => {
        const plyrscript = document.createElement('script');
        plyrscript.src = 'https://cdn.plyr.io/3.5.2/plyr.polyfilled.js';
        document.body.appendChild(plyrscript);
      }


  // handle Video Player
  handleVideoPlayer = () => {
    setTimeout(() => {
      const player = new Plyr('#player')
    }, 500)
  }

  componentDidMount = () => {
    console.log(this);
    if(typeof(this.props.location.state) !== "undefined"){
      let play_data = this.props.location.state;
      this.setState({
        currentEpisode : play_data
      })
    } else {
      console.log("nothing...")
    }
    // call the Plyr init video tag with #player
    this.handlePlyrScript()
    this.handleVideoPlayer()
  }

  render(){
    return(
      <div className={style.playerPageSection}>
        <div className={style.videoWrapper}>
          <div className={style.videoRow}>
            <div className={style.videoLeft}>
              <VideoPlayer video={this.state.currentEpisode} />
            </div>
            <div className={style.videoRight}>

            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default PlayerPage;

但结果没有显示 Plyr 风格的视频，（视频就像一个带有标签的通用播放器。）

React APP中的视频播放器有什么解决方案吗？

标签： reactjs

Answer 1

我认为你正在寻找它已经在这个包中制作：https ://www.npmjs.com/package/react-plyr

应该给你你正在寻找的结果。