跳转到内容
Jason's Study

Video.js — Web 视频播放器框架

是什么

Video.js 是开源 HTML5 视频播放器框架：统一 <video> 的 UI、事件与插件接口，并内置对 HLS/DASH 等流媒体的扩展点。

日常类比：原生 <video> 像毛坯房——能住但不好看、功能少。Video.js 像精装套餐：皮肤、快捷键、全屏、插件插槽一次配齐，还能换主题。

CDN 快速起步：

<link href="//vjs.zencdn.net/8.23.8/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.23.8/video.min.js"></script>
<video id="my-player" class="video-js" controls preload="auto" data-setup='{}'>
  <source src="movie.mp4" type="video/mp4">
</video>

为什么重要

不理解 Video.js，前端视频 UX 会重复造轮子：

  • 十年事实标准：大量站点与 CMS 默认集成，文档与插件生态成熟
  • 抹平浏览器差异：同一套 API 处理全屏、字幕轨、倍速
  • 与 [[hls.js]]、[[dash.js]] 分工：Video.js 管「壳」，协议库管「流」
  • 可访问性与皮肤：比裸 video 更易做键盘导航与品牌定制

核心要点

  1. 自动 setup：带 data-setup='{}' 的节点在 DOM ready 时自动 videojs(id) 初始化。

  2. 插件架构：广告、分析、HLS、VR 等以 plugin 挂载，player.myPlugin() 扩展行为。

  3. 技术委员会治理：TSC 维护路线图；v10 大版本 2026 讨论中，升级需看 changelog。

  4. 多源 <source>：浏览器按支持选 mp4/webm；流媒体常配合 tech order 指定 html5 + 插件。

  5. 事件模型统一：player.on('play', ...) 比直接监听 video 元素更稳定跨 skin。

  6. 响应式布局：fluid: true 与 aspectRatio: '16:9' 让播放器嵌入栅格系统时少写 CSS hack。

实践案例

案例 1：手动初始化与就绪回调

const player = videojs('my-player', {}, function onPlayerReady() {
  videojs.log('播放器就绪');
  this.play();
  this.on('ended', () => videojs.log('播放结束'));
});

适合 React/Vue 里动态挂载，不用 data-setup。

案例 2：切换 HLS 源

player.src({ src: 'https://example.com/live.m3u8', type: 'application/x-mpegURL' });

Safari 可直接播；Chrome 需配合 [[hls.js]] 或官方/contribute 流插件。

案例 3：国际化与皮肤

videojs.addLanguage('zh-CN', { Play: '播放', Pause: '暂停' });
player.language('zh-CN');

企业站常换 CSS 变量与 video-js 皮肤类名统一品牌色。

案例 4：与 shaka-player 技术栈选型

小站：Video.js + [[hls.js]]；要大 DRM + 离线：常整包换 shaka-player UI 版或自研壳。

踩过的坑

  1. 销毁组件：SPA 路由切换要 player.dispose()，否则重复初始化报错。

  2. CSS 加载顺序：未引 video-js.css 时控件布局错乱。

  3. 自动播放限制：与原生相同，需静音或用户手势。

  4. 插件版本与 v8 核心不匹配：major 升级常 breaking，锁版本再升。

  5. HLS 并非所有构建自带：要明确安装 videojs-http-streaming 或外挂 [[hls.js]]。

  6. Fastly CDN 版本滞后：生产建议 npm 锁版本而非永远 latest CDN。

适用 vs 不适用场景

适用：

  • 网站点播/直播需要统一播放器 UX
  • 需要丰富插件（广告、热键、画质菜单）
  • 教学 HTML5 媒体事件模型

不适用：

  • 极简嵌入式（bundle 偏大）
  • 纯原生 App
  • 只要协议层、不要 UI（直接用 [[hls.js]] / [[dash.js]]）

历史小故事（可跳过）

  • 2010：Zencoder 团队发起，填补 HTML5 video 早期碎片
  • 2013–2025：Brightcove 赞助 Corporate Shepherd
  • 2025 起：Mux 接手赞助；每月 CDN 托管播放量极大
  • 与 [[video.js]] 生态：900+ 贡献者，plugins.videojs.com 列插件目录

学到什么

  1. 播放器框架价值在 UX 与扩展点，不在重新发明 MSE
  2. 插件化十年验证：业务差异走插件，核心保持薄
  3. 与协议库解耦是正道：HLS/DASH 换代时少动皮肤层
  4. dispose 与 SPA 生命周期：前端集成最容易踩的坑
  5. 读 options 文档比抄 StackOverflow 稳：配置项极多
  6. 技术选型先看要不要 DRM：要则评估 shaka-player，不要则 Video.js 足够薄

延伸阅读

关联

  • [[hls.js]] —— 常用 HLS 后端
  • [[dash.js]] —— DASH 后端
  • shaka-player —— Google 播放器对照
  • streamlink —— 源地址提取
  • obs-studio —— 内容生产端
  • ffmpeg —— 转码与封装
  • nginx —— 静态文件与反向代理托管
  • mediasoup —— 实时会议场景另一套播放器选型
  • pion —— 实时通信协议另一入口
  • aubio —— 音视频分析扩展阅读

反向链接

（暂无反向链接）