最近用react做的一个毕业展网站,需要播放老师寄语视频,之前做的一些pc端网站都用了videojs,想着react里面适不适用,问了一下度娘,发现也有使用,遂尝试继续使用videojs,可以正常使用
首先安装videojs
npm install video.js
页面中引入js和css
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
html页面
<video-js id="myVideo" width="100%" controls preload="auto" >
<source src={video路径} type="video/mp4"></source>
</video-js>
js
componentWillUnmount() {
if (this.player) {
this.player.dispose()
}
}
componentDidMount() {
// options
let options = {
controls: true,
}
this.player = videojs('myVideo', options, function onPlayerReady() {
// In this context, `this` is the player that was created by Video.js.
// 注意,这个地方的上下文, `this` 指向的是Video.js的实例对像player
});
}
简单这样已经可以使用了
有需要也可以定义options ,加上更多功能
详细查看官网 https://docs.videojs.com/