vue播放m3u8格式视频

vue播放m3u8格式视频

之前播放视频，直接用的h5的video标签，把地址复制给src就可以直接播放了。但是那个是要mp4格式的，现在的视频是m3u8格式的，播放不了，查了下资料，可以用video.js解决这个问题。

vue的使用方法

1. 安装依赖
   npm install --save video.js；
   npm install --save videojs-contrib-hls

2. 在main.js引入全局样式和js文件，也可以在组件局部引入样式，这个看自己的需求

import 'video.js/dist/video-js.css'
import videojs from 'video.js';
import 'videojs-contrib-hls'
1
2
3

3. 在组件中使用

ref的使用方法

<video ref="singleVideo" autoplay controls width=540 height=540></video>  
/* 记得给video宽高 */
1
2

this.singlePlayer = videojs(this.$refs.singleVideo, {
   
autoplay: true<
1
2