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>
  <li
    v-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;
}

功能扩展建议

1. 弹幕发送功能：可以添加输入框实现用户发送弹幕
2. 播放记忆：结合 localStorage 记录播放进度
3. 视频清晰度切换：如果有多个清晰度资源，可以实现切换功能
4. 全屏控制：添加自定义全屏按钮
5. 音量调节：实现更精细的音量控制

总结

本文介绍了如何在 Vue3 中集成 xgplayer 并实现多种实用功能，包括播放列表、自动连播、弹幕和进度条标记。xgplayer 提供了丰富的 API 和插件系统，使得扩展播放器功能变得简单高效。通过 Vue3 的 Composition API，我们可以更清晰地组织组件逻辑，实现更好的代码可维护性。