Vue3 视频播放不用愁！vue3-video-play 快速上手，高颜值还能一键弹幕

一、为什么选 vue3-video-play？

相比原生标签的简陋、大型 SDK 的复杂配置，vue3-video-play 优势超明显：

• ✅ 完全适配 Vue3 组合式 API（Setup 语法糖 / Options API 都支持）；
• ✅ 开箱即用：自带播放 / 暂停、进度条、音量调节、倍速、全屏等基础功能；
• ✅ 高级功能：弹幕、画质切换、播放速度记忆、视频封面自定义；
• ✅ 样式美观：默认 UI 简洁大气，支持自定义主题色，适配移动端 / PC 端；
• ✅ 轻量无冗余：体积小，不依赖多余第三方库，打包体积友好。

二、快速上手：三步集成到 Vue3 项目

1. 安装依赖

首先通过 npm/yarn 安装组件，注意确保你的项目是 Vue3 环境（Vue2 不兼容）：

# npm
npm i vue3-video-play --save
# yarn
yarn add vue3-video-play

2. 全局注册（推荐）

在 main.js 中全局引入组件和样式，一次注册全项目可用：

import { createApp } from 'vue'
import App from './App.vue'
// 引入组件和样式
import vue3VideoPlay from 'vue3-video-play'import 'vue3-video-play/dist/style.css'const app = createApp(App)app.use(vue3VideoPlay) // 全局注册app.mount('#app')

<template>  <vue3-video-play ... /></template><script setup>import { vue3VideoPlay } 
from 'vue3-video-play'import 'vue3-video-play/dist/style.css'</script>

<template>  <div class="video-container">    <!-- 基础播放 -->    <vue3VideoPlay      v-bind="options"      @play="handlePlay"      @pause="handlePause"    />  </div></template><script setup>// 配置项const options = {  width: '800px', // 播放器宽度  height: '450px', // 播放器高度  url: 'https://xxx.com/your-video.mp4', // 视频地址  poster: 'https://xxx.com/cover.jpg', // 视频封面  speed: true, // 是否显示倍速  loop: false, // 是否循环播放  muted: false, // 是否静音}// 播放回调const handlePlay = () => {  console.log('视频开始播放')}// 暂停回调const handlePause = () => {  console.log('视频暂停播放')}</script>