Vue3 + xgplayer 实现多功能视频播放器：支持播放列表、自动连播与弹幕
在现代前端开发中，视频播放功能越来越常见，从在线教育到娱乐平台都离不开高质量的视频播放器。本文将介绍如何使用 Vue3 结合 xgplayer（西瓜播放器）实现一个功能较完善的视频播放器，包含播放列表切换、自动连播、弹幕展示和进度条标记点等实用功能。
技术栈选择
- Vue3：采用 Composition API 及
<script setup>语法糖，实现更简洁的组件逻辑 - xgplayer：字节跳动推出的轻量级、可扩展的视频播放器库
- xgplayer-danmu：xgplayer 的弹幕插件
- Ant Design Vue：用于提供开关组件实现自动连播控制
环境准备
首先需要安装相关依赖
npm install xgplayer --save
npm install ant-design-vue --save
核心功能实现
1. 基础结构搭建
播放器组件主要分为两个部分：左侧的播放列表区域和右侧的视频播放区域。使用 Flex 布局实现基本结构
<template><section class="course-player"><!-- 左侧选集 --><aside class="playlist"><!-- 播放列表内容 --></aside><!-- 右侧播放器 --><main class="main"><div :id="playerId" /></main></section>
</template>
2. 播放器初始化
在 Vue3 的 onMounted 钩子中初始化播放器，通过动态生成播放器 ID 避免重复渲染问题：
import { ref, onMounted, nextTick } from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";const playerId = ref(`xgplayer-${Date.now()}`); // 动态生成ID
let player = null; // 播放器实例// 创建播放器方法
const createPlayer = (url) => {// 销毁已有实例if (player) player.destroy();nextTick(() => {player = new Player({id: playerId.value,url,width: "100%",height: 480,autoplay: true,playbackRate: [0.75, 1, 1.25, 1.5, 2], // 支持的播放速率lang: "zh-cn"});});
};// 组件挂载时初始化
onMounted(() => createPlayer(videos[0].url));
3. 播放列表与切换功能
使用 reactive 存储视频列表数据，通过点击列表项实现视频切换：
import { reactive, ref } from "vue";// 播放列表数据
const videos = reactive([{ title: "1.1 信息的作用", url: videoUrl },{ title: "1.2 发展简史", url: videoUrl },{ title: "1.3 二进制", url: videoUrl },{ title: "1.4 进制转换", url: videoUrl },
]);const cur = ref(0); // 当前播放索引// 切换视频方法
const switchVideo = (i) => {cur.value = i;createPlayer(videos[i].url);
};
列表渲染与样式控制：
<ul><liv-for="(v, i) in videos":key="i":class="{ active: i === cur }"@click="switchVideo(i)">{{ v.title }}</li>
</ul>
4. 自动连播功能
通过监听播放器的 ended 事件实现自动连播，并使用开关控制功能开启 / 关闭：
import { Switch } from "ant-design-vue";
const isAutoplayEnabled = ref(true); // 自动连播开关状态// 在创建播放器时添加事件监听
player.on("ended", () => {if (isAutoplayEnabled.value && cur.value < videos.length - 1) {cur.value++;createPlayer(videos[cur.value].url);}
});
开关组件使用：
<div class="autoplay-toggle"><a-switch v-model:checked="isAutoplayEnabled" size="small" /><span class="toggle-text">自动连播</span>
</div>
5. 弹幕功能集成
引入弹幕插件并配置弹幕内容与样式：
import Danmu from "xgplayer/es/plugins/danmu";
import "xgplayer/es/plugins/danmu/index.css";// 在播放器配置中添加弹幕插件
plugins: [Danmu],
danmu: {comments: [{duration: 200000,id: "2",start: 3000,txt: "长弹幕长弹幕长弹幕",mode: "top", // 顶部固定},{duration: 15000,id: "3",start: 4000,txt: "长弹幕长弹幕长弹幕",mode: "bottom", // 底部固定},{duration: 15000,id: "4",start: 5000,txt: "长弹幕长弹幕长弹幕",mode: "scroll", // 滚动}],area: {start: 0,end: 1,},style: {color: "#ff9500",fontSize: "20px",padding: "2px 11px",},closeDefaultBtn: false,defaultOff: true, // 默认关闭弹幕
}
6. 进度条标记点
通过 progressDot 配置实现进度条上的关键节点标记
progressDot: [{time: 3, // 时间点（秒）text: "text1", // 显示文本duration: 0.01,},{time: 5,text: "text2",duration: 0.01,},{time: 8,text: "text3",duration: 0.01,},
]
样式设计
通过 scoped CSS 实现组件样式隔离，主要包括布局、列表项样式和交互反馈
.course-player {display: flex;height: 480px;font-size: 14px;
}
.playlist {width: 220px;background: #f6f6f6;padding: 12px;overflow-y: auto;
}
.playlist li {padding: 8px 6px;margin-bottom: 4px;cursor: pointer;border-radius: 4px;
}
.playlist li:hover {background: #e0eaf3;
}
.playlist li.active {background: #3983c5;color: #fff;
}
功能扩展建议
- 弹幕发送功能：可以添加输入框实现用户发送弹幕
- 播放记忆：结合 localStorage 记录播放进度
- 视频清晰度切换：如果有多个清晰度资源，可以实现切换功能
- 全屏控制：添加自定义全屏按钮
- 音量调节：实现更精细的音量控制
总结
本文介绍了如何在 Vue3 中集成 xgplayer 并实现多种实用功能，包括播放列表、自动连播、弹幕和进度条标记。xgplayer 提供了丰富的 API 和插件系统，使得扩展播放器功能变得简单高效。通过 Vue3 的 Composition API，我们可以更清晰地组织组件逻辑，实现更好的代码可维护性。