在現代 Web 開發中，視頻播放和互動功能已經成為大多數應用的重要組成部分。特別是對于內容創作者、教育平臺和在線直播，如何快速且高效地在 Vue 3 + TypeScript 項目中集成強大的視頻播放器并添加字幕功能，已經成為一個重要的技術需求。本文將教你如何使用 西瓜播放器（XGPlayer），結合 Vue 3 和 TypeScript，實現一個功能強大的視頻播放和字幕顯示。

1. 前言：視頻播放器的重要性

隨著視頻內容消費的快速增長，特別是在教育、娛樂、新聞等領域，集成一個流暢且功能豐富的視頻播放器已成為 Web 應用的必備。大多數現有的視頻播放器都能滿足基本播放需求，但要實現像字幕切換、播放控制、響應式設計等功能，就需要使用更加專業的播放器。

西瓜播放器 XGPlayer 是一款開源且高性能的前端視頻播放器，支持 HLS、MP4、FLV 等多種格式，并且提供了豐富的插件支持，能夠輕松實現視頻播放器的自定義需求。

在這篇文章中，我們將使用 Vue 3 + TypeScript 配合 XGPlayer 來實現視頻播放、字幕功能和一些交互性功能。

2. 準備工作

2.1 安裝 Vue 3 項目

如果你還沒有一個 Vue 3 項目，首先需要創建一個新的 Vue 3 項目。你可以使用 Vue CLI 或 Vite 來搭建項目。這里使用 Vite 來創建 Vue 3 項目：

npm create vite@latest vue3-xgplayer --template vue-ts
cd vue3-xgplayer
npm install

2.2 安裝 XGPlayer 和相關依賴

我們需要安裝 XGPlayer 及其依賴，以便在 Vue 3 項目中使用：

npm install xgplayer xgplayer-hls

3. 實現視頻播放

西瓜播放器官方文檔-點我進入

3.1 初始化 XGPlayer

首先，我們需要在 Vue 組件中初始化 XGPlayer，并將其與一個 DOM 元素關聯起來，確保視頻能夠正常播放。

創建一個新的 Vue 組件，例如 VideoPlayer.vue，并添加以下代碼：

<template><div id="player-container"><div id="player"></div></div>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import XGPlayer from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import 'xgplayer/es/plugins/track/index.css';
import HlsPlugin from 'xgplayer-hls';const player = ref<XGPlayer | null>(null);onMounted(() => {// 初始化 XGPlayer 播放器player.value = new XGPlayer({id: 'player',url: 'https://path-to-your-video/video.m3u8',  // 這里填寫你的視頻鏈接，可以是 HLS 視頻流width: 800, // 設置播放器寬度height: 450, // 設置播放器高度plugins: [HlsPlugin],  // 如果是 HLS 流，加載 Hls 插件});
});
</script><style scoped>
#player-container {width: 800px;height: 450px;
}
</style>

在這個基礎代碼中，我們創建了一個 XGPlayer 實例，并在 onMounted 生命周期鉤子中初始化播放器。視頻的 URL 需要根據實際的 .m3u8 文件路徑或 MP4 路徑來設置。

4. 添加字幕功能

4.1 配置字幕

為了在視頻中添加字幕，我們需要使用XGPlayer的字幕插件（TextTrack）。首先，我們需要在項目中加載字幕文件，并在播放器配置中指定字幕路徑。

以下是如何在 XGPlayer 中添加字幕的實現：

<template><div id="player-container"><div id="player"></div></div>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import XGPlayer from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import 'xgplayer/es/plugins/track/index.css';
import HlsPlugin from 'xgplayer-hls';
import TextTrack from 'xgplayer/es/plugins/track';const player = ref<XGPlayer | null>(null);onMounted(() => {// 初始化 XGPlayer 播放器player.value = new XGPlayer({id: 'player',url: 'https://path-to-your-video/video.m3u8',  // 這里填寫你的視頻鏈接width: 800,height: 450,plugins: [HlsPlugin, TextTrack],  // 加載 HLS 插件和字幕插件texttrack: {list: [{id: 'vtt1',url: 'https://path-to-your-subtitles/subtitles-en.vtt',  // 這里填寫你的字幕文件 URLlanguage: 'en',text: 'English Subtitles',default: true,  // 設置為默認字幕},],},});
});
</script><style scoped>
#player-container {width: 800px;height: 450px;
}
</style>

在上述代碼中，我們通過texttrack配置來加載字幕文件，并且可以根據需要配置不同語言的字幕。我們使用了 .vtt 字幕文件，并設置其為默認字幕。

4.2 字幕文件格式

字幕文件需要是 WebVTT 格式。它的基本結構如下：

WEBVTT1
00:00:07.920 --> 00:00:12.760
So, according to the analysis,00:00:25.040 --> 00:00:26.760
the two recipients are00:00:28.360 --> 00:00:30.040
biological relatives.00:00:39.520 --> 00:00:40.960
But not the result00:00:40.960 --> 00:00:43.040
that you wanted, brother.00:00:43.880 --> 00:00:44.760
I'm sorry, it's so00:00:44.760 --> 00:00:45.920
hard to accept me.00:00:45.920 --> 00:00:47.160
That can't be it.00:00:47.480 --> 00:00:48.520
His eyes,00:00:48.600 --> 00:00:50.000
they were a different color.00:00:50.000 --> 00:00:51.440
Stop it, Nicholas.00:00:51.440 --> 00:00:51.840
Father.00:00:51.840 --> 00:00:53.760
I said stop it.00:01:01.160 --> 00:01:03.200
After the accident at sea,00:01:03.640 --> 00:01:05.680
David nearly lost his sight.00:01:05.920 --> 00:01:07.080
You have no idea what00:01:07.080 --> 00:01:09.120
your brother endured.00:01:10.640 --> 00:01:12.320
And you know what?00:01:12.320 --> 00:01:15.720
Ironically, David had surgery00:01:15.720 --> 00:01:17.680
to save his vision.00:01:18.800 --> 00:01:22.480
But the only blind one here is you.

5. 增加交互性

你可以為視頻播放器添加更多交互性功能，如播放控制、選擇語言、調整視頻速度等。這些功能可以通過綁定事件來實現。

例如，增加一個按鈕來切換字幕語言：

<template><div id="player-container"><div id="player"></div><button @click="toggleSubtitles">Toggle Subtitles</button></div>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import XGPlayer from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import 'xgplayer/es/plugins/track/index.css';
import HlsPlugin from 'xgplayer-hls';
import TextTrack from 'xgplayer/es/plugins/track';const player = ref<XGPlayer | null>(null);onMounted(() => {player.value = new XGPlayer({id: 'player',url: 'https://path-to-your-video/video.m3u8',width: 800,height: 450,plugins: [HlsPlugin, TextTrack],texttrack: {list: [{id: 'vtt1',url: 'https://path-to-your-subtitles/subtitles-en.vtt',language: 'en',text: 'English Subtitles',default: true,},{id: 'vtt2',url: 'https://path-to-your-subtitles/subtitles-zh.vtt',language: 'zh',text: 'Chinese Subtitles',default: false,},],},});
});const toggleSubtitles = () => {if (player.value) {const textTracks = player.value.getTextTracks();textTracks.forEach((track) => {track.mode = track.mode === 'showing' ? 'disabled' : 'showing';});}
};
</script><style scoped>
#player-container {width: 800px;height: 450px;
}
</style>

在這個例子中，我們為視頻添加了一個按鈕來切換字幕顯示。

完整的代碼，僅供參考

<template><div id="player-container"><div id="player" /><!-- 選擇按鈕，初始隱藏 --><div v-if="showChoices" class="choices"><button @click="selectChoice('A')">A 不予理會</button><button @click="selectChoice('B')">B 上前</button></div></div>
</template><script setup lang="ts">
import { ref, onMounted } from "vue";
import XGPlayer from "xgplayer";
import "xgplayer/dist/index.min.css";
import "xgplayer/es/plugins/track/index.css";
import HlsPlugin from "xgplayer-hls";
import TextTrack from "xgplayer/es/plugins/track";const player = ref<XGPlayer | null>(null);
const showChoices = ref(false); // 控制選擇按鈕顯示與隱藏const playerVideo = () => {if (player.value) {player.value.play(); // 播放視頻}
};const initPlayer = async () => {player.value = new XGPlayer({id: "player",url: "https://video.provideoshrot.com/production/video/0100/7fe7a58be8f441ad423dcfa807aca133/94435e7de793fb5d86f401cdcecd6fe3/h264-narrow-sd.m3u8",width: 800,height: 450,muted: true, // 靜音播放，避免自動播放限制plugins: [HlsPlugin, TextTrack],texttrack: {list: [{id: "vtt2",url: "https://x-short-prod.s3.ap-northeast-1.amazonaws.com/prod/videos/2-25126641776734208/0022dcd8467e60231f783e29ceff4d4d/srt.vtt",language: "en",text: "英文字幕",default: true,},],},});// 播放進度監聽，檢查是否到了需要顯示選擇按鈕的時間點player.value.on("timeupdate", () => {if (player.value) {// 當視頻播放到10秒到15秒時顯示選擇按鈕if (player.value.currentTime >= 10 && player.value.currentTime < 15) {showChoices.value = true;} else {showChoices.value = false;}}});
};// 用戶選擇并跳轉到不同的視頻位置
const selectChoice = (choice: string) => {if (player.value) {if (choice === "A") {player.value.currentTime = 20; // 跳轉到選擇 A 后的時間點} else if (choice === "B") {player.value.currentTime = 30; // 跳轉到選擇 B 后的時間點}player.value.play(); // 繼續播放視頻showChoices.value = false; // 隱藏選擇按鈕}
};// 在組件掛載后初始化播放器
onMounted(() => {initPlayer(); // 確保在 DOM 渲染完成后調用播放器初始化
});
</script><style>
#player-container {width: 800px;height: 450px;
}.choices {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.7);padding: 20px;border-radius: 10px;
}button {background-color: #f0f0f0;padding: 10px;margin: 5px;border: none;border-radius: 5px;cursor: pointer;
}button:hover {background-color: #ddd;
}
</style>

6. 總結

通過本文，你已經學會如何在Vue 3 + TypeScript項目中集成 西瓜播放器XGPlayer，實現視頻播放和字幕功能。通過利用 XGPlayer 的插件系統，你可以很容易地添加更多的互動功能，如選擇字幕、控制播放速度等。希望本文的示例能夠幫助你快速構建一個高效、靈活的視頻播放器。

如果你喜歡這篇文章，歡迎點贊和分享！