Vue3 视频播放器完整指南 – @videojs-player/vue 从入门到精通 - 教程

前言

在 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

快速上手

基础用法

基础视频播放器
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";

自定义配置

自定义配置播放器
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);
};

高级用法

播放器控制

视频播放器演示
播放控制
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);
}
};

直播流播放

直播流播放器
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) => {};

字幕支持

字幕支持播放器
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) => {};

常见问题

Q: 如何实现自动播放？

A: 由于浏览器限制，自动播放需要满足以下条件之一：

• 视频设置为静音（muted: true）
• 用户已与页面交互

Q: 如何处理跨域视频？

A: 确保视频服务器设置了正确的 CORS 头，或在组件上添加 crossorigin 属性：

总结

@videojs-player/vue 是 Vue 3 应用中实现视频播放功能的最佳选择之一，它简单、可靠、高效，能够满足大多数视频播放需求。无论是简单的视频展示还是复杂的流媒体应用，它都能提供出色的解决方案。

Vue3 视频播放器完整指南 - @videojs-player/vue 从入门到精通 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享