为什么我构建了 vLitejs，一个快速且灵活的原生视频和音频播放器

发布: 2天前 (2025年12月8日 GMT+8 04:44)

5 min read

Source: Dev.to

历史

vLitejs 的第一个版本于 2019 发布，支持 HTML5 视频 和 YouTube。随后不久加入了音频支持、可访问性以及键盘导航。之后又集成了 Dailymotion 和 Vimeo 等平台。

社区贡献塑造了项目。Issue 和讨论帮助完善代码，而决策遵循明确的愿景，以保持库的轻量和高性能。

背景与动机

vLitejs 的创建旨在提供一个轻量、快速且灵活的播放器。当时 Video.js 和 Plyr.js 因大量功能需求和复杂的维护而变得臃肿。vLitejs 的目标是让默认播放器保持最小化，并通过插件将额外功能设为可选。

设计原则与架构

vLitejs 采用清晰的分层：

核心（Core） – HTML5 播放的最小必需功能。
提供者（Providers） – 外部平台（YouTube、Dailymotion、Vimeo）的适配器，按需加载对应 SDK。
插件（Plugins） – 可选功能（画中画、字幕、投屏、快捷键等），在不触及核心代码的前提下扩展播放器。

关键技术选择

使用 TypeScript 编写，以获得强类型支持。
以 EcmaScript Module (ESM) 形式分发。
支持最新的 Node.js LTS 版本和现代浏览器。

每个提供者都继承自基础的 Player 类，确保行为一致。插件通过公共 API 与该类交互，使代码库保持模块化和可复用。

功能

核心

默认支持 HTML5 视频 & 音频
可访问性与键盘导航
可自定义的控制元素
统一的事件 API

提供者

YouTube
Dailymotion
Vimeo（SDK 自动加载）

插件（精选）

画中画（Picture-in-Picture）
字幕
投屏 & AirPlay
快捷键
粘性播放器
盈利（Google IMA SDK）

高级

HLS 流媒体支持
行内 SVG 图标

vLitejs 播放器

工作原理

初始化播放器

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';

new Vlitejs('#player');

提供者示例（YouTube）

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsYoutube from 'vlitejs/providers/youtube.js';

Vlitejs.registerProvider('youtube', VlitejsYoutube);

new Vlitejs('#player', {
  provider: 'youtube'
});

插件示例（画中画 + 字幕）

import 'vlitejs/vlite.css';
import 'vlitejs/plugins/pip.css';
import 'vlitejs/plugins/subtitle.css';

import Vlitejs from 'vlitejs';
import VlitejsPip from 'vlitejs/plugins/pip.js';
import VlitejsSubtitle from 'vlitejs/plugins/subtitle.js';

Vlitejs.registerPlugin('pip', VlitejsPip);
Vlitejs.registerPlugin('subtitle', VlitejsSubtitle);

new Vlitejs('#player', {
  plugins: ['pip', 'subtitle']
});

全局事件

所有事件在不同提供者和插件之间保持统一。

new Vlitejs('#player', {
  onReady: (player) => {
    player.on('play', () => console.log('Video started'));
    player.on('pause', () => console.log('Video paused'));
    player.on('timeupdate', () => {
      console.log('Current time', player.getCurrentTime());
    });
  }
});

创建自定义插件

开发者可以构建与播放器实例交互的自定义插件，并通过插件 API 注册。请参阅插件 API 文档与提供者 API 文档了解生命周期钩子和最佳实践。

未来计划

使用 Playwright 为核心和插件集成编写自动化 E2E 测试
根据用户需求新增提供者和插件
改进文档和插件/提供者开发示例
持续进行性能监控与有针对性的优化

关键要点

清晰的架构能在保持核心极简的同时实现最佳性能。
模块化 让定制化成为可能，而不会给库带来负担。
强大的 TypeScript 类型 确保可维护性和可靠性。
仅支持现代浏览器，避免不必要的遗留代码。
社区反馈很重要，但决策始终围绕保持项目轻量的核心愿景。

结论

vLitejs 是一个开源、快速且灵活的视频/音频播放器。其模块化设计让你只加载所需功能：默认提供一个简单、可靠的播放器，高级特性可按需引入。

了解 vLitejs

❤️ 特别感谢 Maxime Lerouge 在早期提供的帮助以及 Victor Schirm 为项目设计的徽标。