react中使用videojs

最近用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/

你可能感兴趣的:(React)