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/

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值