#安装

安装 Video.js 并构建你的第一个播放器，支持流媒体播放和可访问的控件。

Video.js 是一个 React 视频播放器组件库：可组合的基础组件、hooks 和 TypeScript 类型，用于构建可访问、可定制的播放器，具有最小的包体积、高级功能和跨浏览器一致性。

#安装 Video.js

#使用 npm

npm install @videojs/react

#使用 pnpm

pnpm add @videojs/react

#使用 yarn

yarn add @videojs/react

#使用 bun

bun add @videojs/react

#使用 CDN (HTML 版本)

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.js"></script>

#创建你的播放器

将播放器组件添加到你的 components 文件夹中的新文件。

// ./components/player/index.tsx
'use client';

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

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

interface MyPlayerProps {
  src: string;
}

export const MyPlayer = ({ src }: MyPlayerProps) => {
  return (
    <Player.Provider>
      <VideoSkin>
        <Video src={src} playsInline />
      </VideoSkin>
    </Player.Provider>
  );
};

#使用你的播放器

// ./app/page.tsx
import { MyPlayer } from '../components/player';

export const HomePage = () => {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyPlayer src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
    </div>
  );
};

#模块加载说明

使用打包工具（npm、pnpm、yarn、bun）时，使用 type="module" 加载生成的包：

<script type="module" src="/dist/player.js"></script>

某些打包工具默认输出 IIFE 格式。不使用 type="module" 加载该包会导致与播放器交互时出现 StoreError: NO_TARGET 错误。CDN 安装路径已经使用 type="module" —— 打包安装也需要同样的设置。

#CSP (内容安全策略)

如果你的应用使用了内容安全策略（CSP），可能需要允许额外的源以确保播放器功能正常工作。

#常见要求

• media-src 必须允许你的媒体 URL。
• img-src 必须允许任何海报或缩略图图片 URL。
• connect-src 必须允许 HLS 清单、播放列表、字幕和分段请求（使用 HLS 播放时）。
• media-src blob: 在使用 HLS 播放器变体时是必需的，它们使用 MSE 支持的播放。
• worker-src blob: 在使用 hls.js 播放器变体时是必需的。
• style-src 'unsafe-inline' 目前对某些播放器 UI 和 HTML 播放器样式行为是必需的。

#示例

Content-Security-Policy:
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https: data: blob:;
  media-src 'self' https: blob:;
  connect-src 'self' https:;
  worker-src 'self' blob:;

#参见

• 皮肤 - 一些皮肤暴露 CSS 自定义属性

就是这样！你现在拥有一个功能完整的 Video.js 播放器。去探索和播放吧！

如果有什么不对劲？你可以提交 issue寻求帮助，或探索其他支持选项。

下一步： 为什么选择 Video.js？