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

最新推荐文章于 2025-04-20 16:59:58 发布

原创最新推荐文章于 2025-04-20 16:59:58 发布

· 1.4k 阅读

10 ·

版权

文章标签：

#vue.js #前端 #javascript

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

对比

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

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

使用`M3u8Video`组件

安装

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

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

// 在 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` 组件

安装
```
npm install hls.js -S
```
引入 -> 下方 HlsVideo 压缩包解压放到 /src/components 目录下

使用

// 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 为失败