基于video.js +node + webpack + vue实现监控视频播放

本文记录使用用法，详细原理暂不做考虑。

一、安装环境

淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install --save video.js

cnpm install --save videojs-contrib-hls

 

二、引入样式

import 'video.js/dist/video-js.css'

 

三、html代码

<video id="videoid" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png">
 <source src="视频地址.m3u8" type="application/x-mpegURL">
</video>

四、js代码

videojs('videoid', {
 bigPlayButton: false,
 textTrackDisplay: false,
 posterImage: true,
 errorDisplay: false,
 controlBar: true
}, function () {
 this.play()
})