加载依赖
npm install --save video.js
封装组件
说明: 这里sources可以传入多个视频源,type可以自己指定根据播放流来进行选择。因为需求我是一个一个视频单独加载出来的。
VideoPlayer.js
import React from 'react';
import videojs from 'video.js';
import './myVideo.css';
export default class VideoPlayer extends React.Component {
componentDidMount() {
this.props = {
autoplay: true,
controls: true,
sources: [{
src: this.props.src,
type: 'application/x-mpegURL'
}]
};
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
console.log('onPlayerReady', this);
});
this.player.play();
}
componentWillUnmount() {
if (this.player) {
this.player.dispose();
}
}
render() {
return (
<div>
<div data-vjs-player>
<video ref={ node => this.videoNode = node } className="video-js vjs-default-skin video" autoplay="autoplay"></video>
</div>
</div>
);
}
}
myVideo.css
.video{
width: 25%;
float: left;
}
.BigVideo{
width: 100%;
height: 500px;
}
组件使用
这里主要写的是使用方法
import VideoPlayer from 'component/VideoPlayer/VideoPlayer';
import 'video.js/dist/video-js.min.css';
render() {
return (
<VideoPlayer src={this.state.videoUrl} ></VideoPlayer>
);
}