草莓播放器 · Plyr：简洁国际化 UI

本篇介绍草莓播放器中的 Plyr 方案。Plyr 以「简洁、国际化、高可访问性」著称，是轻量内容站的常见选择。

原出处

Plyr 是一套开源的、符合 WAI-ARIA 的 HTML5 media 播放器，由 Sam Potts 开发。本项目在其 Plyr 官方仓库基础上，将资源（plyr.js、plyr.css）与 Hls.js 本地化到 plyr/ 目录。

项目：Plyr https://github.com/sampotts/plyr
官网：https://plyr.io/
Hls.js：https://github.com/video-dev/hls.js

修改说明

参数入口：读取 ?url=，缺失时展示居中错误提示，不再停留在控制台死路。
m3u8 支持：用 Hls.js 驱动，MANIFEST_PARSED 后自动播放；Safari 回退原生 HLS；ERROR（fatal）时弹出加载失败。
FLV 的明确处理：Plyr 原生不支持 FLV，页面对其进行拦截并友好提示改用其它播放器（如 DPlayer / Aliplayer），避免静默失败。
控件与控制：自定义 controls 顺序，含播放/进度/时间/音量/设置/画中画/AirPlay/全屏；settings 提供倍速与循环；开启存储记忆；初始静音自动播放。
适配：object-fit: contain 维持比例；监听 resize 调用 player.size() 自适应。

实现效果

简洁漂亮的国际化 UI、无障碍（ARIA）
支持 HLS（m3u8）、MP4、WebM；Safari 原生 HLS
倍速、循环、画中画、全屏、AirPlay
播放进度与音量记忆（localStorage）

演示说明

🎬 在线演示（下方为该播放器内嵌实时播放，可点击右下角全屏）：

https://play.123366.xyz/plyr/?url=视频地址

注意：FLV 源不建议走 Plyr，页面会给出提示；HLS 与 MP4 体验最佳。

部署教程

本教程采用 Plyr 官网的标准做法：通过 CDN 或 npm 引入官方库，用原生 <video> 元素初始化播放器，并接入草莓播放器 ?url=视频地址 的传参播放。

官网 / 文档

官网：https://plyr.io/
GitHub：https://github.com/sampotts/plyr

安装

Plyr 支持 npm 与 CDN 两种引入方式：

方式一：npm（推荐用于构建项目）

1
npm i plyr

然后在 JS 中导入：

1
2
import Plyr from 'plyr';
import 'plyr/dist/plyr.css';

方式二：CDN（无需构建，直接引用官网当前版本）

1
2
<link rel="stylesheet" href="https://cdn.plyr.io/3.8.4/plyr.css" />
<script src="https://cdn.plyr.io/3.8.4/plyr.polyfilled.js"></script>

HTML 结构

在页面中加入一个原生 video 元素并带上 controls 属性，Plyr 会在此基础上构建自己的控件界面：

1
2
3
<video id="player" controls playsinline>
  <source src="video.mp4" type="video/mp4" />
</video>

初始化

Plyr 官方标准初始化方式，是选择 video 元素后 new Plyr(...)：

1
const player = new Plyr('#player');

或直接传入 DOM 元素：

1
const player = new Plyr(document.querySelector('video'));

构造函数接受选择器字符串或 DOM 元素，并可通过第二参数传入选项，例如自定义 controls、speed（倍速）、settings 等。

用 ?url= 传参播放

草莓播放器通过 URL 中的 ?url=视频地址 参数指定要播放的媒体。读取参数并交给 Plyr 的标准做法如下：

MP4 等直链视频：直接把 src 写入 <video> 元素后初始化 Plyr，或初始化后设置 source：

1
2
3
4
5
6
7
const url = new URLSearchParams(location.search).get('url');

const player = new Plyr('#player');
player.source = {
  type: 'video',
  sources: [{ src: url, type: 'video/mp4' }],
};

HLS（m3u8）：Plyr 官方支持 HLS 需配合 hls.js。标准流程是先引入 hls.js（最好使用 polyfill 版本），检测到 supports HLS 时执行 hls.loadSource(url) 并 hls.attachMedia(video)，之后再 new Plyr(...)：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import Hls from 'hls.js';
import Plyr from 'plyr';

const url = new URLSearchParams(location.search).get('url');
const video = document.querySelector('video');

if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(url);
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play();
  });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // Safari 原生 HLS 回退
  video.src = url;
}

const player = new Plyr(video);

CDN 场景下，将 import 换为对应 <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script> 即可。

HLS 支持

如上所述，Plyr 自身不解析 HLS；官网标准做法是搭配 hls.js——先用 hls.js 把 m3u8 交给 <video> 解码，再交给 Plyr 渲染控制层。Safari 支持原生 HLS，可省略 hls.js 直接设置 video.src。

下载文件、部署到自己网站

上面的 CDN 用于快速体验；若要把 Plyr 下载文件并在自己的网站部署：

需要下载哪些文件：Plyr 由 JS、CSS、SVG 图标精灵三部分组成，建议三个一起放同一目录（来自官方 plyr npm 包 dist/）：
- dist/plyr.js → https://cdn.jsdelivr.net/npm/plyr@3.8.4/dist/plyr.js
- dist/plyr.css → https://cdn.jsdelivr.net/npm/plyr@3.8.4/dist/plyr.css
- dist/plyr.svg（控件图标，须与 CSS 同目录）→ https://cdn.jsdelivr.net/npm/plyr@3.8.4/dist/plyr.svg
放到网站目录：在站点根目录新建 plyr/ 文件夹，把三个文件放进去。

本地引用：

1
2
3
4
5
6
7
8
<link rel="stylesheet" href="./plyr/plyr.css">
<script src="./plyr/plyr.js"></script>
<video id="player" controls playsinline></video>
<script>
const player = new Plyr('#player', {
  sources: [{ src: new URLSearchParams(location.search).get('url'), type: 'video/mp4' }],
});
</script>

用 ?url= 播放：整站上传到任意静态托管（Nginx、EdgeOne Pages、GitHub Pages 等），无需后端：
```
https://你的域名/plyr/?url=视频地址
```

若控制条图标不显示，确认 plyr.svg 与 plyr.css 处于同一目录即可（CSS 会按相对路径引用精灵）。只播 MP4 无需额外依赖；需要 HLS 时才额外下载 hls.js（见上文「HLS 支持」）。