Video.js v10 Beta发布：时隔16年完全重写，包体积减小88%

我看看怎么个事
0 阅读1分钟

前言

今天我们很高兴发布Video.js v10.0.0 Beta版本。这是一次完全重写的成果，不仅重写了Video.js本身，还联合了Plyr、Vidstack、Media Chrome等开源项目的开发者共同参与，这些项目累计获得了75,000个GitHub星标，每月服务数十亿次视频播放。

我在16年前创建了Video.js，帮助Web从Flash过渡到HTML5视频。多年来在众多贡献者的帮助下它成长了很多，但代码库和API仍然反映了旧时代的Web开发模式。这次重写不仅让播放器适配现代开发方式，也为未来向AI增强特性和开发过渡打下了基础。

核心优化点

  • 极致压缩包体积：默认包体积减少了88%
  • 深度定制支持：原生支持React、TypeScript和Tailwind，符合你熟悉的开发模式
  • 美观高效的默认样式：默认皮肤经过精心设计，交互流畅
  • AI友好的代码结构：文档和代码设计让AI代理可以更好地帮助你构建播放器

使用示例

HTML版本

<video-player>
  <video-skin>
    <video src="video.mp4"></video>
  </video-skin>
</video-player>

React版本

import '@videojs/react/video/skin.css';

import { createPlayer } from '@videojs/react';
import { videoFeatures, VideoSkin, Video } from '@videojs/react/video';

const Player = createPlayer({
  features: videoFeatures,
});

function App() {
  return (
    <Player.Provider>
      <VideoSkin>
        <Video src="video.mp4" />
      </VideoSkin>
    </Player.Provider>
  );
}

包体积对比

现在视频播放器最受诟病的问题之一就是文件大小，最小化后通常有1MB左右，gzip后也有数百KB。Video.js v10的默认包相比v8版本减小了88%。即使剔除自适应比特率（ABR）功能后，v10默认播放器仍然比v8小66%。

播放器最小化体积（kB）gzip后体积（kB）说明
Video.js v8（核心）260.575.2
Vidstack237.474.1
Media Chrome175.541.3
Plyr109.832.6
Video.js v10 视频播放器（HTML）97.425.1
Video.js v10 音频播放器（HTML）85.823.0
Video.js v10 视频播放器（React）62.018.0
Video.js v10 音频播放器（React）49.215.2
Video.js v10 背景视频（HTML）22.26.9
Video.js v10 背景视频（React）10.73.5

SPF流媒体引擎

作为v10的一部分，我们开发了新的流媒体引擎SPF（Streaming Processor Framework），基于函数式组件构建，可以按需组合出更小的流媒体引擎。对于简单的HLS使用场景，使用SPF的Video.js v10仅为包含ABR功能的v8版本的19%大小。

引擎最小化体积（kB）gzip后体积（kB）说明
dash.js962.1294.2仅支持DASH
Shaka753.0239.1支持HLS和DASH
hls.js503.4155.9仅支持HLS
VHS（v8）434.4127.6依赖video.js，支持HLS和DASH
HLS.js-light328.5103.4移除了DRM、字幕等功能
SPF组合引擎38.512.1仅包含简单ABR所需功能

甚至一个仅包含视频和播放按钮的React最小示例，gzip后体积不到5kB：

import { createPlayer, features } from '@videojs/react';
import { Video } from '@videojs/react/video';

const Player = createPlayer({
  features: [features.playback],
});

function App() {
  const store = Player.usePlayer();
  const paused = Player.usePlayer((s) => s.paused);

  return (
    <Player.Provider>
      <Player.Container>
        <Video src="video.mp4" />
        <button onClick={() => (paused ? store.play() : store.pause())}>
          {paused ? 'Play' : 'Pause'}
        </button>
      </Player.Container>
    </Player.Provider>
  );
}

UI自定义体验

v10 Beta自带了几套精心设计的皮肤，同时我们也在UI自定义上投入了大量精力：

  • 支持Web Components和React组件
  • 采用无样式UI原语设计，类似Radix UI和Base UI
  • 可以像shadcn/ui一样"弹出"皮肤源代码，直接在项目中修改

进度条自定义示例

React版本：

<TimeSlider.Root className="slider">
  <TimeSlider.Track className="slider-track">
    <TimeSlider.Buffer className="slider-buffer" />
    <TimeSlider.Fill className="slider-fill" />
  </TimeSlider.Track>
  <TimeSlider.Thumb className="slider-thumb" />
</TimeSlider.Root>

HTML版本：

<media-time-slider class="slider">
  <media-slider-track class="slider-track">
    <media-slider-buffer class="slider-buffer"></media-slider-buffer>
    <media-slider-fill class="slider-fill"></media-slider-fill>
  </media-slider-track>
  <media-slider-thumb class="slider-thumb"></media-slider-thumb>
</media-time-slider>

样式也更加直观：

.slider-thumb {
  width: 0.75rem;
  height: 0.75rem;
  background: white;
  border-radius: 50%;
}

预设场景支持

Beta版本提供了三个开箱即用的预设：

  1. 默认视频预设：适合普通网站视频场景
  2. 默认音频预设：适合播客等音频场景
  3. 背景视频预设：适合页面背景视频，没有控制条和音频

未来还会扩展更多场景：创作者平台播放器、短视频滑动播放器、教育课程播放器等。

AI友好设计

我们专门针对AI代理开发做了优化：

  • 低抽象度的组件和无样式UI原语，AI可以直接在项目中操作代码
  • 提供llms.txt文件，帮助AI更高效地导航文档
  • 所有文档都支持markdown格式，减少AI处理的上下文冗余
  • 内置AI技能集，未来会开放给用户使用

尝试Beta版

注意：目前API还未完全稳定，适合在简单项目中实验和提供反馈，还不建议用于大型生产项目。

avatar
文章
阅读
粉丝