草莓播放器 · 原生 Video（video.js 内核）

本篇介绍草莓播放器中的「原生 Video」方案——以 video.js 为内核的轻量播放器，特别强化了键盘快捷键与倍速操作。

原出处

video.js 是全球使用最广的开源 HTML5 视频播放器框架之一。本项目在其 video.js 官方仓库（内核）与 videojs-flv（FLV）基础上，将资源本地化到 video/ 目录。

项目：video.js https://github.com/videojs/video.js
官网：https://videojs.com/
videojs-flv：https://github.com/videojs/videojs-flv

修改说明

参数入口：读取 ?url=，另支持 poster、autoplay=1 可选参数。
格式识别：.m3u8 → application/x-mpegURL，.flv → video/x-flv 并切换 techOrder: ['html5','flvjs']，其余默认 video/mp4。
倍速按钮：controlBar 开启倍速菜单，playbackRates: [0.5~3]。
自定义快捷键：完整实现键盘操作——
- →/D 快进 10 秒，←/A 快退 10 秒
- 空格 播放/暂停，↑/↓ 音量，F 全屏，M 静音
- C 循环切换倍速（0.5x~3x），并弹出 OSD 提示
OSD：左上角的瞬时提示条，反馈快进/倍速/音量等操作。

实现效果

video.js 经典皮肤、轻量高效
支持 MP4、HLS、FLV（flvjs）
控制栏原生倍速菜单 + 1~3× 自定义
完整键盘快捷键 + 操作提示（OSD）
可选 poster 封面与 autoplay=1 强制自动播放

演示说明

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

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

可选参数：

?url=视频地址&poster=封面图&autoplay=1

播放后可用键盘快捷键操控，适合需要快速交互或键盘重度用户。

部署教程

本节按 video.js 官网文档的官方方式介绍如何部署一个 video.js 播放器，并接入本项目演示页的 ?url= 传参用法。

获取 video.js

方式一：npm 安装（推荐）

1
npm i video.js

方式二：官网推荐 CDN

将以下标签放入 HTML 的 <head>（建议使用与项目一致的最新版本 8.24.0）：

1
2
<link href="https://vjs.zencdn.net/8.24.0/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.24.0/video.min.js"></script>

初始化播放器（官方两种方式）

方式一：HTML data-setup

给 <video> 元素添加 video-js class 与 data-setup='{}'（一个空对象即可）即可自动初始化：

1
2
3
4
5
6
7
8
9
<video
  id="my-player"
  class="video-js"
  controls
  preload="auto"
  data-setup='{}'
  poster="MY_VIDEO_POSTER.jpg">
  <source src="demo.mp4" type="video/mp4" />
</video>

方式二：JavaScript 手动初始化

通过 videojs() 函数传入影片 ID 与配置（sources 数组指定片源），更灵活：

1
2
3
4
5
const player = videojs('my-player', {
  sources: [
    { src: 'demo.mp4', type: 'video/mp4' }
  ]
});

用 `?url=` 传参的最小示例

本项目演示页通过 URL 参数直接指定片源地址，最小示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="https://vjs.zencdn.net/8.24.0/video.min.js"></script>
<link href="https://vjs.zencdn.net/8.24.0/video-js.css" rel="stylesheet" />

<video id="my-player" class="video-js" controls preload="auto" data-setup='{}'></video>

<script>
  // 读取 URL 参数，示例 demo.mp4
  const params = new URLSearchParams(location.search);
  const src = params.get('url') || 'demo.mp4';

  // 判断片源类型：.m3u8 → HLS，.flv → FLV，其余按 MP4
  function probeType(url) {
    return url.endsWith('.m3u8') ? 'application/x-mpegURL'
         : url.endsWith('.flv')  ? 'video/x-flv'
         :                         'video/mp4';
  }

  const type = probeType(src);
  videojs('my-player', {
    sources: [{ src, type }]
  });
</script>

HLS / FLV 支持

video.js 原生支持 MP4 与 HLS（经其 VHS 模块）；如需完整的 FLV 播放，可选用官方生态插件 videojs-contrib-hls / videojs/vhs，或结合开源流媒体解复用库 hls.js / flv.js 使用。本项目即按格式自动识别 .m3u8 与 .flv 并切换对应的 techOrder。

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

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

需要下载哪些文件：播放 MP4 需要 video.min.js + 配套样式 video-js.min.css 两个官方文件（来自 video.js npm 包 dist/）。CDN 镜像亦可直接获取：
- jsDelivr：https://cdn.jsdelivr.net/npm/video.js@8.24.0/dist/video.min.js / https://cdn.jsdelivr.net/npm/video.js@8.24.0/dist/video-js.min.css
放到网站目录：在站点根目录新建 video/ 文件夹，把两个文件放进去。

本地引用：

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

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

只播 MP4 无需额外依赖；需要 FLV 时才额外下载 flv.min.js（见上文「FLV 支持」）。

原出处