Vue3 + XGPlayer 打造专业级视频播放器 – 功能丰富性能优秀

简介

XGPlayer 是由西瓜视频开源的 HTML5 视频播放器，具有功能丰富、性能优秀、易于扩展的特点。本文档将详细介绍如何在 Vue3 项目中集成和使用 XGPlayer。

安装

npm install xgplayer
# or
yarn add xgplayer
# or
pnpm add xgplayer

基础用法

简单视频播放器

<template>
  <div class="video-container">
    <div ref="playerContainer" class="player"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Player from "xgplayer";

const playerContainer = ref(null);
let player = null;

const videoConfig = {
  id: "video-player",
  url: "https://vjs.zencdn.net/v/oceans.mp4",
  poster: "https://code.ifrontend.net/wp-content/uploads/gif/poster.jpg",
  width: "100%",
  height: "400px",
  autoplay: false,
  controls: true,
  fluid: true,
};

onMounted(() => {
  if (playerContainer.value) {
    player = new Player({
      ...videoConfig,
      el: playerContainer.value,
    });
  }
});

onUnmounted(() => {
  if (player) {
    player.destroy();
  }
});
</script>

<style scoped>
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.player {
  width: 100%;
  height: 400px;
}
</style>

高级配置

常用自定义配置

const videoConfig = {
  pip: true, // 开启画中画
  playbackRate: [1, 2, 3, 4, 5], // 设置播放速度
  download: true, // 开启下载按钮
  screenShot: true, // 开启截图按钮
  videoAttributes: {
    crossOrigin: "anonymous", // 设置视频跨域属性
  },
  // 进度条标记
  progressDot: [
    {
      time: 3,
      text: "标记标题1",
    },
    {
      time: 5,
      text: "标记标题2",
    },
    {
      time: 32,
      text: "标记标题3",
    },
    {
      time: 36,
      text: "标记标题4",
    },
  ],
  // 视频旋转
  rotate: {
    clockwise: false,
    innerRotate: false,
  },
  // 字幕
  textTrack: [
    {
      src: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/textTrack-1.vtt",
      label: "字幕1",
      default: true,
    },
    {
      src: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/textTrack-2.vtt",
      label: "字幕2",
      default: false,
    },
  ],
};

多视频源播放器

<template>
  <div class="video-container">
    <div ref="playerContainer" class="player"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Player from "xgplayer";

const playerContainer = ref(null);
let player = null;

// 多画质资源配置
const videoResources = [
  {
    name: "标清",
    url: "https://vjs.zencdn.net/v/oceans.mp4,
  },
  {
    name: "高清",
    url: "https://vjs.zencdn.net/v/oceans.mp4",
  },
  {
    name: "超清",
    url: "https://vjs.zencdn.net/v/oceans.mp4",
  },
];

const videoConfig = {
  id: "video-player",
  url: videoResources[0].url, // 默认使用第一个画质
  poster: "https://code.ifrontend.net/wp-content/uploads/gif/poster.jpg",
  width: "100%",
  height: "400px",
  autoplay: false,
  controls: true,
  fluid: true,
};

onMounted(() => {
  if (playerContainer.value) {
    player = new Player({
      ...videoConfig,
      el: playerContainer.value,
    });

    // 设置多画质资源，启用画质切换功能
    player.emit("resourceReady", videoResources);
  }
});

onUnmounted(() => {
  if (player) {
    player.destroy();
  }
});
</script>

<style scoped>
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.player {
  width: 100%;
  height: 400px;
}
</style>

播放器控制

<template>
  <div class="api-player">
    <div ref="playerRef" class="player"></div>
    <div class="controls">
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
      <button @click="toggleMute">静音切换</button>
      <button @click="setVolume(0.5)">设置音量50%</button>
      <button @click="seek(30)">跳转到30秒</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Player from "xgplayer";

const playerRef = ref(null);
let player = null;

// 播放控制方法
const play = () => {
  if (player) player.play();
};

const pause = () => {
  if (player) player.pause();
};

const toggleMute = () => {
  if (player) {
    player.muted = !player.muted;
  }
};

const setVolume = (volume) => {
  if (player) {
    player.volume = volume;
  }
};

const seek = (time) => {
  if (player) {
    player.currentTime = time;
  }
};

onMounted(() => {
  if (playerRef.value) {
    player = new Player({
      id: "api-player",
      url: "https://vjs.zencdn.net/v/oceans.mp4",
      poster: "https://code.ifrontend.net/wp-content/uploads/gif/poster.jpg",
      width: "100%",
      height: "500px",
      controls: true,
      el: playerRef.value,
      // 添加全屏相关配置
      cssFullscreen: true, // 启用 CSS 全屏模式
    });
  }
});

onUnmounted(() => {
  if (player) {
    player.destroy();
  }
});
</script>

<style scoped>
.controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.controls button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
}

.controls button:hover {
  background: #f5f5f5;
}
</style>

注意事项

1. 内存管理: 组件销毁时务必调用 player.destroy() 方法释放资源
2. 响应式设计: 使用 fluid: true 配置实现响应式播放器
3. 错误处理: 监听 error 事件处理播放错误
4. 性能优化: 对于大量视频，考虑使用懒加载策略
5. 兼容性: XGPlayer 支持现代浏览器，IE11+ 需要 polyfill

总结

XGPlayer 在 Vue3 中的集成相对简单，通过合理的配置和事件处理，可以构建功能丰富的视频播放应用。本文档涵盖了基础用法、高级配置、事件处理和常用 API，为开发者提供了完整的参考指南。