#为什么选择 Video.js？

适用于 React 和 HTML 的开源视频播放器。轻量级、可访问的组件，专为性能和流媒体而构建。

Video.js 是 Web 的开源视频播放器。它使 Web 视频变得简单、高性能、可访问且可定制。

让我们深入了解何时需要使用 Video.js，从我们经常听到的那个问题开始……

#为什么不用<video>？

原生的 <video> 标签在将视频描述为带播放按钮的图片时表现很好。但除此之外，差距很快就显现出来了。

#跨浏览器不一致性

Chrome、Safari 和 Firefox 各自渲染默认的 <video> 控件 differently。你可以隐藏它们，但不能深度样式化或重新排列它们。构建与产品匹配的 UI 意味着从头开始。

#视频交互

视频通常涉及的远不止 src 中的 MP4。丰富的播放功能（如缩略图预览、自适应码率、质量选择、章节、音轨切换、控件本地化、错误 UI、直播 UI、分析、广告、360 视频、Chromecast、AirPlay、DRM 等）在视频元素中是可能的，但需要复杂的接线和深入的可维护性与可访问性考虑。

Video.js 旨在开箱即用地处理所有这些。（尽管某些功能仍在开发中。敬请期待！）

#流媒体格式和源

自适应码率和质量选择等功能背后是 HLS 或 DASH 等视频格式——视频被分成段，可以根据带宽和偏好进行选择。并非每个浏览器都支持 HLS，DASH 支持更有限。Video.js 弥合了这一差距，使相同的 src 在任何地方都能工作。

当然，你的视频可能不是来自那样的 src。它可能由服务提供。然而，YouTube、Vimeo 和 Mux 等服务各自使用自己的 API。从自托管文件切换到托管服务不应该意味着切换播放器。Video.js 抽象了源，因此你可以更改视频来源而无需重写周围代码。

Video.js 甚至考虑 canvas 基础的 MoQ 或动画 GIF 等源，都使用相同的组件。

#为什么选择 Video.js？

Video.js 由 Mux 构建，团队来自 Video.js、Plyr、Vidstack 和 Media Chrome，还有来自其他播放器项目的工程师贡献。我们之间，我们的项目已经服务了数百亿次月度视频播放。本页上的大多数选择都来自我们第一次、第二次、第五次做错的事情。我们十多年来一直在支持你的边缘案例。现在我们正在发布我们一直想构建的播放器。

让我们深入了解一些设计原则，帮助解释为什么我们要构建 Video.js 以及为什么它可能是你项目或团队的最佳选择。

#按需添加

大多数播放器库将所有功能打包在一个包中，因此你携带了不运行的代码。如果你的视频不需要 DRM 等功能，为什么要打包这些代码？Video.js 将功能转变为独立的、可组合的模块。你向 createPlayer 传递你实际想要的数组，你不导入的内容不会打包。

import { createPlayer, playbackFeature, timeFeature } from '@videojs/react';

const Player = createPlayer({
  features: [playbackFeature, timeFeature],
});

当然，如果你不想，你不必考虑需要的每个功能。如果你不想手动组装列表，预构建的功能包仍然可用。

了解更多关于功能

了解更多关于预设

#框架原生

许多播放器库为每个框架包装单个 Web 组件。这有效，直到你遇到接缝：无法传递的 refs、无法协调的状态、不太像 React 或 HTML 的 prop 名称。Video.js 在每个框架中提供惯用的 API：React 的 React 组件和 hooks，HTML 的自定义元素和控制器。（我们计划在未来支持更多框架！）

播放器感觉像你应用的其他部分一样。

React:

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

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

#弹出并拥有

大多数播放器库在"通过 props 配置"和"fork 源代码"之间画了一条线。跨过这条线，你就只能靠自己了。Video.js 允许你弹出任何皮肤并带走源代码：用你框架的语言编写的组件，你可以阅读和更改。你发布的皮肤是你的；播放器的其余部分继续在下面工作。

自定义皮肤

#AI 原生开发体验

面向人类读者的文档通常对代理没有帮助。Video.js 发布 llms.txt 索引，将每个文档页面同时作为 HTML 和 Markdown 提供，并有专门的使用 AI 助手构建的指南。将播放器放入 Claude 或 Cursor 会话中，文档会随之而来。

使用 AI 构建

上一步： 安装

下一步： 概述