前言

在?Vue?3 生態中，視頻播放功能是許多應用的核心需求。@videojs-player/vue?是一個專門為?Vue 3?設計的視頻播放器組件，基于成熟的 Video.js?庫構建，提供了簡單而強大的視頻播放解決方案。

主要特性

• Vue 3 組件化：原生 Vue 3 組件，完美融入組合式 API
• 功能豐富：支持多種視頻格式、直播流、字幕等
• 高度可定制：支持主題、插件、控制欄等多種自定義選項
• TypeScript 支持：完整的類型定義
• 響應式設計：自適應不同屏幕尺寸

安裝方式

# npm
npm install video.js @videojs-player/vue# yarn
yarn add video.js @videojs-player/vue# pnpm
pnpm add video.js @videojs-player/vue

快速上手

基礎用法

<template><div class="text-center"><h2 class="text-2xl font-bold p-2">基礎視頻播放器</h2><VideoPlayersrc="https://vjs.zencdn.net/v/oceans.mp4"poster="https://github.surmon.me/images/poster/oceans.png":controls="true":fluid="true"/></div>
</template><script setup>
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";
</script>

自定義配置

<template><div><h2>自定義配置播放器</h2><VideoPlayer :options="videoOptions" @ready="onPlayerReady" /></div>
</template><script setup>
import { ref } from "vue";
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";const videoOptions = ref({autoplay: "muted", // 自動播放controls: true, // 是否顯示控制欄responsive: true, // 是否響應式fluid: true, // 是否自適應父容器寬度loop: true, // 是否循環播放playbackRate: 2, // 播放速度playbackRates: [0.5, 1, 1.5, 2], // 播放速度選項sources: [{src: "https://vjs.zencdn.net/v/oceans.mp4",type: "video/mp4",},],poster: "https://github.surmon.me/images/poster/oceans.png",
});const onPlayerReady = (player) => {console.log("播放器已準備就緒", player);
};
</script>

高級用法

播放器控制

<template><divclass="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-8"><div class="max-w-4xl mx-auto"><!-- 標題 --><h1class="text-3xl font-bold text-white text-center mb-8 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">視頻播放器演示</h1><!-- 視頻播放器容器 --><divclass="bg-white/10 backdrop-blur-sm rounded-2xl p-6 shadow-2xl border border-white/20"><video-player:options="videoOptions"@mounted="handleMounted"class="w-full h-auto max-w-full rounded-xl overflow-hidden shadow-lg"/></div><!-- 控制按鈕區域 --><divclass="mt-8 bg-white/10 backdrop-blur-sm rounded-2xl p-6 shadow-2xl border border-white/20"><h2 class="text-xl font-semibold text-white mb-4 text-center">播放控制</h2><div class="flex flex-wrap gap-4 justify-center"><button@click="play"class="px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center gap-2"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M8 5v10l8-5-8-5z" /></svg>播放</button><button@click="pause"class="px-6 py-3 bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center gap-2"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M5 4h3v12H5V4zm7 0h3v12h-3V4z" /></svg>暫停</button><button@click="mute"class="px-6 py-3 bg-gradient-to-r from-red-500 to-pink-600 hover:from-red-600 hover:to-pink-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center gap-2"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><pathd="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.617.794L5.617 14H3a1 1 0 01-1-1V7a1 1 0 011-1h2.617l2.766-2.794a1 1 0 011-.13zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z"/></svg>靜音</button><button@click="setVolume(0.5)"class="px-6 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center gap-2"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><pathd="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.617.794L5.617 14H3a1 1 0 01-1-1V7a1 1 0 011-1h2.617l2.766-2.794a1 1 0 011-.13z"/></svg>設置音量</button><button@click="seekTo(30)"class="px-6 py-3 bg-gradient-to-r from-purple-500 to-violet-600 hover:from-purple-600 hover:to-violet-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center gap-2"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><pathd="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"/></svg>跳轉到30秒</button></div></div></div></div>
</template><script setup>
import { ref, reactive } from "vue";
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";const player = ref();const videoOptions = reactive({controls: true,sources: [{src: "https://vjs.zencdn.net/v/oceans.mp4",type: "video/mp4",},],poster: "https://github.surmon.me/images/poster/oceans.png",
});const handleMounted = (payload) => {console.log("handleMounted", payload);player.value = payload.player;
};const play = () => {if (player.value) {player.value.play();}
};const pause = () => {if (player.value) {player.value.pause();}
};const mute = () => {if (player.value) {player.value.muted(!player.value.muted());}
};const setVolume = (volume) => {if (player.value) {player.value.volume(volume);}
};const seekTo = (time) => {if (player.value) {player.value.currentTime(time);}
};
</script>

直播流播放

<template><div><h2>直播流播放器</h2><VideoPlayer :options="liveOptions" @ready="onLivePlayerReady" /></div>
</template><script setup>
import { ref } from "vue";
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";const liveOptions = ref({controls: true,responsive: true,fluid: true,liveui: true,sources: [{src: "https://example.com/live-stream.m3u8",type: "application/x-mpegURL",},],
});const onLivePlayerReady = (player) => {};
</script>

字幕支持

<template><div><h2>字幕支持播放器</h2><VideoPlayer :options="subtitleOptions" @ready="onSubtitlePlayerReady" /></div>
</template><script setup>
import { ref } from "vue";
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";const subtitleOptions = ref({controls: true,responsive: true,fluid: true,sources: [{src: "https://vjs.zencdn.net/v/oceans.mp4",type: "video/mp4",},],tracks: [{kind: "subtitles",src: "https://example.com/subtitles-zh.vtt",srclang: "zh",label: "中文",default: true,},{kind: "subtitles",src: "https://example.com/subtitles-en.vtt",srclang: "en",label: "English",},],
});const onSubtitlePlayerReady = (player) => {};
</script>

常見問題

Q: 如何實現自動播放？

A: 由于瀏覽器限制，自動播放需要滿足以下條件之一：

• 視頻設置為靜音（muted: true）
• 用戶已與頁面交互

<VideoPlayer autoplay="muted" />

Q: 如何處理跨域視頻？

A: 確保視頻服務器設置了正確的 CORS 頭，或在組件上添加?crossorigin?屬性：

<VideoPlayer :src="videoSrc" crossorigin="anonymous" />

總結

@videojs-player/vue?是 Vue 3 應用中實現視頻播放功能的最佳選擇之一，它簡單、可靠、高效，能夠滿足大多數視頻播放需求。無論是簡單的視頻展示還是復雜的流媒體應用，它都能提供出色的解決方案。

?Vue3 視頻播放器完整指南 - @videojs-player/vue 從入門到精通 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享