Vue3视频播放器神器Plyr.js：29.2k星标，BBC、SpaceX都在用的现代化播放器

前言：还在为网站视频播放器发愁吗？还在忍受原生 HTML5 播放器的丑陋界面吗？今天给大家介绍一个让无数开发者为之疯狂的视频播放器神器——Plyr.js！它不仅颜值爆表，功能更是强大到令人惊叹！

什么是 Plyr.js？

Plyr.js 是由澳大利亚设计师 Sam Potts 开发的一款轻量级、可访问、高度可定制的 HTML5 媒体播放器。它支持 HTML5 视频、音频、YouTube 和 Vimeo，是目前最受欢迎的 Web 视频播放器之一。

GitHub 数据说话：

29.2k+ 星标
3.1k+ Fork
数百万次 npm 下载
被 BBC、Peugeot、Toyota、SpaceX 等知名企业使用

🎯 核心特性

** 颜值担当**：现代化设计，支持完全自定义样式
** 响应式设计**：完美适配各种屏幕尺寸
** 无障碍支持**：完整的 VTT 字幕和屏幕阅读器支持
** 轻量级**：压缩后仅 10KB，性能卓越
** 高度可定制**：使用正确的 HTML 元素，语义化标记
** 多平台支持**：HTML5、YouTube、Vimeo 一网打尽
** 流媒体支持**：支持 HLS.js、Shaka 和 dash.js
** 快捷键支持**：完整的键盘操作支持
** 全屏模式**：原生全屏 + 降级支持
** 事件统一**：所有格式的事件都标准化处理

为什么选择 Plyr.js？

1. 颜值即正义

Plyr.js 的设计理念就是”美”。它摒弃了传统播放器的丑陋界面，采用现代化的扁平设计风格，支持完全自定义的 CSS 样式。

2. 性能卓越

加载速度极快
使用原生 HTML5 元素，性能优化到位
支持懒加载和渐进式增强

3. 开发友好

零依赖，纯 JavaScript 实现
完整的 TypeScript 支持
丰富的 API 和事件系统
详细的文档和示例

4. 企业级应用

被众多知名企业采用，包括：

BBC – 英国广播公司
SpaceX – 太空探索技术公司
Toyota – 丰田汽车
Peugeot – 标致汽车

Vue3 集成实战

安装依赖

# 安装 Plyr.js
npm install plyr

# 或者使用 yarn
yarn add plyr

基础使用

<template>
  <div class="video-container">
    <video
      ref="videoPlayer"
      class="plyr-video"
      poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
      playsinline
      controls
    >
      <source
        src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
        type="video/mp4"
        size="576"
      />
      <source
        src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
        type="video/mp4"
        size="720"
      />
      <source
        src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
        type="video/mp4"
        size="1080"
      />

      <!-- Caption files -->
      <track
        kind="captions"
        label="English"
        srclang="en"
        src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
        default
      />
    </video>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Plyr from "plyr";
import "plyr/dist/plyr.css";

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

onMounted(() => {
  // 初始化 Plyr 播放器
  player = new Plyr(videoPlayer.value, {
    controls: [
      "play-large", // 大播放按钮
      "restart", // 重新开始
      "rewind", // 快退
      "play", // 播放/暂停
      "fast-forward", // 快进
      "progress", // 进度条
      "current-time", // 当前时间
      "duration", // 总时长
      "mute", // 静音
      "volume", // 音量控制
      "captions", // 字幕
      "settings", // 设置
      "pip", // 画中画
      "airplay", // AirPlay
      "fullscreen", // 全屏
    ],
    settings: ["captions", "quality", "speed", "loop"],
    speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] },
    quality: {
      default: 720,
      options: [1080, 720, 480, 360],
    },
  });

  // 监听播放器事件
  player.on("ready", () => {
    console.log("播放器已准备就绪");
  });

  player.on("play", () => {
    console.log("开始播放");
  });

  player.on("pause", () => {
    console.log("暂停播放");
  });

  player.on("ended", () => {
    console.log("播放结束");
  });
});

onUnmounted(() => {
  // 销毁播放器实例
  if (player) {
    player.destroy();
  }
});
</script>

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

.plyr-video {
  width: 100%;
  height: auto;
}
</style>

常用的配置选项

播放控制

属性	类型	默认值	描述
`autoplay`	Boolean	`false`	自动播放
`muted`	Boolean	`false`	静音播放
`volume`	Number	`1`	音量 (0-1)
`clickToPlay`	Boolean	`true`	点击播放/暂停
`hideControls`	Boolean	`true`	鼠标离开时隐藏控制栏
`resetOnEnd`	Boolean	`false`	播放结束后重置到开始位置
`disableContextMenu`	Boolean	`true`	禁用右键菜单

键盘快捷键

属性	类型	默认值	描述
`keyboard`	Object	`{ focused: true, global: false }`	键盘快捷键配置
`keyboard.focused`	Boolean	`true`	播放器获得焦点时启用快捷键
`keyboard.global`	Boolean	`false`	全局快捷键（无需焦点）

进度条配置

属性	类型	默认值	描述
`seekTime`	Number	`10`	快进/快退时间（秒）
`speed`	Object	`{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }`	播放速度配置
`speed.selected`	Number	`1`	默认播放速度
`speed.options`	Array	`[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]`	可选播放速度

画质配置

属性	类型	默认值	描述
`quality`	Object	`{ default: 720, options: [1080, 720, 480, 360] }`	画质配置
`quality.default`	Number	`720`	默认画质
`quality.options`	Array	`[1080, 720, 480, 360]`	可选画质列表

字幕配置

属性	类型	默认值	描述
`captions`	Object	`{ active: false, language: 'auto', update: false }`	字幕配置
`captions.active`	Boolean	`false`	默认显示字幕
`captions.language`	String	`'auto'`	默认字幕语言
`captions.update`	Boolean	`false`	是否更新字幕

全屏配置

属性	类型	默认值	描述
`fullscreen`	Object	`{ enabled: true, fallback: true, iosNative: false }`	全屏配置
`fullscreen.enabled`	Boolean	`true`	启用全屏功能
`fullscreen.fallback`	Boolean	`true`	使用全屏 API 降级方案
`fullscreen.iosNative`	Boolean	`false`	iOS 原生全屏

画中画配置

属性	类型	默认值	描述
`ratio`	String	`'16:9'`	视频宽高比
`invertTime`	Boolean	`true`	倒计时显示
`clickToPlay`	Boolean	`true`	点击播放/暂停
`hideControls`	Boolean	`true`	自动隐藏控制栏
`resetOnEnd`	Boolean	`false`	播放结束后重置
`disableContextMenu`	Boolean	`true`	禁用右键菜单

存储配置

属性	类型	默认值	描述
`storage`	Object	`{ enabled: true, key: 'plyr' }`	本地存储配置
`storage.enabled`	Boolean	`true`	启用本地存储
`storage.key`	String	`'plyr'`	存储键名

工具提示配置

属性	类型	默认值	描述
`tooltips`	Object	`{ controls: false, seek: true }`	工具提示配置
`tooltips.controls`	Boolean	`false`	控制按钮工具提示
`tooltips.seek`	Boolean	`true`	进度条工具提示

广告配置

属性	类型	默认值	描述
`ads`	Object	`{ enabled: false, publisherId: '', tagUrl: '' }`	广告配置
`ads.enabled`	Boolean	`false`	启用广告
`ads.publisherId`	String	`''`	广告发布商 ID
`ads.tagUrl`	String	`''`	广告标签 URL

标记配置

属性	类型	默认值	描述
`markers`	Object	`{ enabled: true, key: 'plyr' }`	标记配置
`markers.enabled`	Boolean	`true`	启用标记
`markers.points`	Array	`{time: 30,label: "精彩片断1",}`	标题点

🎨 自定义样式

Plyr.js 支持完全自定义样式，你可以轻松打造属于自己的播放器外观：

player.on("ready", () => {
  console.log("播放器已准备就绪");
  // 播放器准备就绪后应用红色主题
  applyRedTheme();
});

// 应用红色主题的函数
const applyRedTheme = () => {
  const plyrContainer = document.querySelector(".plyr");
  if (plyrContainer) {
    plyrContainer.classList.add("red-theme");
  }
};

/* 大红色主题样式 - 使用 !important 确保优先级 */
.plyr.red-theme {
  --plyr-color-main: #dc2626 !important;
  --plyr-menu-background: #1f2937 !important;
  --plyr-menu-color: #ffffff !important;
  --plyr-menu-border-color: #dc2626 !important;
  --plyr-control-background: rgba(220, 38, 38, 0.8) !important;
  --plyr-control-color: #ffffff !important;
  --plyr-progress-loading-background: rgba(220, 38, 38, 0.3) !important;
  --plyr-progress-buffered-background: rgba(220, 38, 38, 0.4) !important;
  --plyr-progress-played-background: #dc2626 !important;
  --plyr-range-track-background: rgba(220, 38, 38, 0.3) !important;
  --plyr-range-thumb-background: #dc2626 !important;
  --plyr-range-thumb-border: #ffffff !important;
  --plyr-tooltip-background: #dc2626 !important;
  --plyr-tooltip-color: #ffffff !important;
  --plyr-captions-background: rgba(220, 38, 38, 0.8) !important;
  --plyr-captions-color: #ffffff !important;
}

总结

Plyr.js 不仅是一个视频播放器，更是提升用户体验的利器。无论你是个人开发者还是企业团队，Plyr.js 都能为你的项目带来专业级的视频播放体验。

还在等什么？立即体验 Plyr.js 的魅力吧！ 🎬✨

原文链接：https://code.ifrontend.net/archives/1352，转载请注明出处。

什么是 Plyr.js？

🎯 核心特性

为什么选择 Plyr.js？

1. 颜值即正义

2. 性能卓越

3. 开发友好

4. 企业级应用

Vue3 集成实战

安装依赖

基础使用

常用的配置选项

播放控制

键盘快捷键

进度条配置

画质配置

字幕配置

全屏配置

画中画配置

存储配置

工具提示配置

广告配置

标记配置

🎨 自定义样式

总结

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

Vue3视频播放器神器Plyr.js：29.2k星标，BBC、SpaceX都在用的现代化播放器

什么是 Plyr.js？

🎯 核心特性

为什么选择 Plyr.js？

1. 颜值即正义

2. 性能卓越

3. 开发友好

4. 企业级应用

Vue3 集成实战

安装依赖

基础使用

常用的配置选项

播放控制

键盘快捷键

进度条配置

画质配置

字幕配置

全屏配置

画中画配置

存储配置

工具提示配置

广告配置

标记配置

🎨 自定义样式

总结

猜你喜欢

Nuxt DevTools 全面上手：一键启用、可视化调试与性能体检

别再“滥用” useState：这些高频需求更该交给 useRef

前端测试驱动开发：Vitest 助力 Vue 项目单元测试工程化实战

React表单架构深度解析，受控vs非受控组件的技术内幕

React + DOMPurify：高性能HTML安全渲染解决方案 – 零依赖安全防护

可视化布局编辑器必备！GridStack.js实现拖拽式页面构建器

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部