M3u8Video/HlsVideo之视频流以及MP4播放

背景：鉴于公司项目诸多监控视频播放, 目前项目中, 后台返回前台的视频流是 HLS 转码之后的 m3u8 格式, 普通的 video 标签不可直接播放视频流, 且在不同浏览器, video 支持程度不一, 原生 video 标签只支持 Ogg、MPEG4、WebM 三种格式, 至此引入视频流播放插件。

对比

1. 播放m3u8 视频流 (推荐 HlsVideo): M3u8Video 初次加载视频, 相比 HlsVideo 要延迟 1 到 2 秒, 用户体验差点儿
2. 播放mp4文件 (推荐 M3u8Video): 因为此时HlsVideo组件内部只是使用 video标签, 浏览器兼容性不如 M3u8Video

 💋💋 注意: 播放 MP4 文件时, 需要确保传入的地址含有 .mp4 后缀, 两组件内自动处理, 否则 传入 type 字段

使用M3u8Video组件

1. 安装

   npm install vue-video-player@5.0.2 -S
   npm install videojs-contrib-hls -S

2. 引入 -> 将下方 M3u8Video 压缩包解压放到 /src/components 目录下
3. 使用

// 在 main.js中组件注册
import M3u8Video from '@/components/M3u8Video'
Vue.component('M3u8Video', M3u8Video)//使用
<div style="border: 1px solid red; height: 360px; width: 600px"><M3u8Video :src="videoSrc"></M3u8Video>
</div>

    

❤️❤️❤️ 组件接收的 属性有

 props: {src: { type: String, default: '' },aspectRatio: { type: String, default: '16:9' },// type application/x-mpegURL 可以播放m3u8视频流 video/MP4 播放 MP4视频type: { type: String, default: 'application/x-mpegURL' },},

HlsVideo 组件

1. 安装

   ​npm install hls.js -S

2. 引入 -> 下方 HlsVideo 压缩包解压放到 /src/components 目录下
3. 使用 

   // main.js中组件注册
   import HlsVideo from '@/components/HlsVideo'
   Vue.component('HlsVideo', HlsVideo)// 使用
   <div style="border: 1px solid red; height: 360px; width: 600px"><HlsVideo :src="videoSrc"></HlsVideo>
   </div>
   

   ❤️❤️❤️ 组件接收的 属性有

   props: {// 监控地址  必填src: { type: String, default: '', required: true },// 监控宽高width: { type: String, default: '100%' },// 自动播放autoplay: { type: Boolean, default: true },
   },

   播放成功与失败都接收 playing 事件, 接参 true 为成功, false 为失败