984 积分	0 好友	124 主题

发消息

Vue3视频播放组件实战：集成vue3-video-play实现HLS直播与MP4点播

发表于 12 小时前 | 查看: 1| 回复: 0

Vue3-video-play组件界面展示

对于使用 Vue.js 3 的开发者而言，处理视频播放需求时，常常会面临一些挑战：市面上的播放器组件功能参差不齐，兼容性不佳；想要集成 HLS 直播流播放，需要手动引入 hls.js 并处理各种兼容性问题；而像自定义封面、倍速播放、画中画这类功能，往往需要编写大量代码才能实现。

那么，如何快速集成一个功能全面、兼容性好的视频播放器呢？最近发现了一个名为 vue3-video-play 的开源组件。它原生支持 MP4/WebM/Ogg 格式及 HLS 直播流，内置了十多项实用功能，配置灵活且上手简单。

核心功能概览

这个组件将许多复杂功能进行了封装，开箱即用，能够覆盖绝大多数视频播放场景：

🌐 全格式支持：不仅支持常见的 MP4、WebM、Ogg 视频格式，还内置了对 HLS 直播流（m3u8 格式）的支持，点播和直播需求可以一站式解决。
🎬 功能丰富：提供了倍速播放（支持 0.5x 至 2.0x 自定义范围）、画面镜像、关灯模式、画中画等功能。如果视频流支持，还可以进行画质和音轨切换。
⌨️ 键盘快捷键：支持空格键暂停/播放、方向键控制快进/快退和音量、F 键全屏、Esc 键退出全屏，操作体验流畅。
📱 跨端自适应：在 PC 端使用自定义的控制器界面，在移动端则会自动调用系统原生的视频播放器，无需额外编写兼容代码。
🎨 高度可定制：播放器的主题色、尺寸、封面图都可以轻松修改，控制器上的按钮也可以根据需要选择显示或隐藏。
⏩ 播放控制灵活：支持设置初始播放时间点、禁用进度条拖拽、循环播放、默认静音等，满足特定业务场景的需求。

此外，组件还提供了右键菜单功能，可以进行视频滤镜调节、查看快捷键说明、复制视频地址等。其最新版本 v1.3.1-beta.2 还新增了通过 currentTime 属性跳转播放、type 属性指定视频格式等实用特性。

快速上手教程

第一步：安装组件

可以通过 npm 或 yarn 进行安装：

# 使用 npm
npm i vue3-video-play --save

# 使用 yarn
yarn add vue3-video-play --save

第二步：引入组件

你可以选择全局引入或在单个组件内按需引入。

方式一：全局引入（推荐在整个项目中使用时）

import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App)

// 引入组件和样式
import vue3videoPlay from 'vue3-video-play'
import 'vue3-video-play/dist/style.css'

app.use(vue3videoPlay)
app.mount('#app')

方式二：组件内引入（按需加载，更轻量）

// 必须引入样式
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue-video-play'

export default {
  components: { videoPlay }
}

第三步：基础使用示例

将以下代码复制到你的 Vue 组件中，替换视频地址即可使用，所有参数均可按需配置：

<template>
  <vue3VideoPlay 
    v-bind="options" 
    poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
  />
</template>

<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
  width: '800px',    // 播放器宽度
  height: '450px',   // 播放器高度
  color: "#409eff",  // 主题色（支持任意色值）
  title: "钢铁侠",   // 视频名称
  src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", // 视频源
  muted: false,      // 是否静音
  autoPlay: false,   // 自动播放（true时默认静音）
  loop: false,       // 循环播放
  mirror: false,     // 镜像画面
  ligthOff: false,   // 关灯模式
  volume: 0.3,       // 默认音量（0-1之间）
  control: true,     // 是否显示控制器
  // 自定义控制器按钮（按需选择显示）
  controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen']
})
</script>

进阶使用场景

设置初始播放时间并禁用进度条拖拽

const options = reactive({
  currentTime: 60, // 从第60秒开始播放
  speed: false, // 关闭进度条拖动功能
  src: "视频地址",
  // 其他配置...
})

播放 HLS 直播流（m3u8格式）

这是该组件在处理流媒体时的核心优势之一，它内部已经集成并处理好了 hls.js 的相关逻辑。

<template>
  <vue3VideoPlay 
    width="800px"
    title="直播测试"
    :src="options.src"
    :type="options.type"
  />
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
  src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", // 直播流地址
  type: 'm3u8', // 必须指定视频类型为 m3u8
})
</script>

监听视频播放事件

<vue3VideoPlay 
  width="800px"
  title="钢铁侠"
  :src="options.src"
  @play="onPlay"
  @pause="onPause"
  @timeupdate="onTimeupdate"
/>
<script setup lang="ts">
const onPlay = (ev) => console.log('视频开始播放', ev)
const onPause = (ev) => console.log('视频暂停', ev)
const onTimeupdate = (ev) => console.log('播放时间更新', ev)
</script>

关键配置参数速查表

配置项	作用	类型	默认值
`width`/`height`	播放器尺寸	string	`800px`/`450px`
`color`	主题色	string	`#409eff` (Vue 主题蓝)
`currentTime`	初始播放时间（秒）	number	`0`
`speedRate`	可选的倍速列表	array	`["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"]`
`controlBtns`	需要显示的控制器按钮	array	全部按钮显示
`type`	视频类型（直播流需设为 `m3u8`）	string	`video/mp4`

适用场景与总结

vue3-video-play 组件非常适合以下场景的开发：

构建视频网站或在线教育平台的前端页面。
需要在 Vue3 项目中集成直播功能，如电商直播、赛事直播等。
内部管理系统需要嵌入视频演示模块，如产品教程、企业培训视频。
希望快速实现视频功能，避免在兼容性和底层实现上耗费精力的开发者。

这个组件最大的价值在于将复杂的视频处理逻辑进行了高度封装。开发者无需关心 hls.js 的底层集成、移动端兼容性差异或者繁琐的快捷键逻辑，通过简单的配置就能获得一个功能完备的播放器。同时，它完全兼容原生 <video> 标签的属性和事件，扩展性很强。组件作者维护积极，在 GitHub 上响应问题也比较及时。