时间戳

首页 > 解决方案 > React.Js 和 Video.js 集成

reactjs - React.Js 和 Video.js 集成

问题描述

在下面的文章之后，我试图在我的反应应用程序中显示视频。

reactjsvideojs 但是当我动态渲染视频组件时视频没有得到更新。

RenderVideo(path){
const videoJsOptions = {
autoplay: true,
controls: true,
sources: [{
src: path,
type: 'video/mp4'
}]
}

return <VideoPlayer { ...videoJsOptions } />
}

当我点击视频缩略图时调用。

 {props.imgs[index].mediaType === 'VIDEO' && (
      <div className={styles.videoContainer}> 
             {RenderVideo(props.imgs[index].primaryLink)}
      </div>
    )}

VideoJsplayer 组件

class VideoJsPlayer extends React.Component {
  componentDidMount() {
    const { onReady, ...options } = this.props;
    this.player = videojs(this.videoNode, options, onReady);
  }

  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    /* eslint-disable jsx-a11y/media-has-caption */
    return (
      <div data-vjs-player>
        <video
          ref={node => (this.videoNode = node)}
          className="video-js vjs-big-play-centered"
        />
      </div>
    );
  }
}

VideoJsPlayer.propTypes = {
  onReady: PropTypes.func,
};

VideoJsPlayer.defaultProps = {
  onReady: noop,
};

export default VideoJsPlayer

有人可以帮助我为什么视频没有动态更新。

这是我观察到的事情 1) 其次，当我渲染视频时，它没有达到 componentdidmount。

标签： reactjsvideo.js

解决方案

我创建了一个反应组件react-video-js-player，它在内部使用 videoJS 并公开了所有 videoJS API。它将为您提供 videojs 实例，以便您也可以集成各种 videojs 插件。

import React, { Component } from 'react';
import VideoPlayer from 'react-video-js-player';

class VideoApp extends Component {
    player = {}
    state = {
        video: {
            src: "http://www.example.com/path/to/video.mp4",
            poster: "http://www.example.com/path/to/video_poster.jpg"
        }
    }

    onPlayerReady(player){
        console.log("Player is ready: ", player);
        this.player = player;
    }

    render() {
        return (
            <div>
                <VideoPlayer
                    src={this.state.video.src}
                    poster={this.state.video.poster}
                    onReady={this.onPlayerReady.bind(this)}
                />
            </div>
        );
    }
}
export default VideoApp;

推荐阅读