首先,我们需要在vue工程中安装video.js相关依赖。
npm install --save video.jsnpm install --save videojs-contrib-hls复制代码
然后,我们需要引入videojs的css文件,例如在main.js中引入
import 'video.js/dist/video-js.css'复制代码
接着,我们在需要播放视频的页面引入js对象
import videojs from 'video.js'import 'videojs-contrib-hls'复制代码
指定一个video容器,例如:
复制代码
最后,我们在mounted节点初始化播放器:
videojs('my-video', { bigPlayButton: false, textTrackDisplay: false, posterImage: true, errorDisplay: false, controlBar: true}, function () { this.play()})复制代码
这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。