# @devultur/react 中文文档

规范地址：https://npmcn.com/package/%40devultur/react/

版本：1\.6\.1
npm 元数据更新时间：2026-11-03T19:33:44.290Z
中文译文更新时间：2026-11-12T04:36:56.941Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40devultur/react
原文对照：https://npmcn.com/package/%40devultur/react/?lang=original
项目主页：https://github.com/devultur/devultur#readme
源码仓库：https://github.com/devultur/devultur

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：126 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>=19\.0\.0
- 首次发布：2026-10-18T17:19:45.221Z
- 最新版本发布：2026-11-03T19:33:43.955Z
- 近 30 天下载量：3792（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：99（近 12 个月 99 个）

## 中文简介

Devultur 介质的回放组件和钩子: HLS 视频播放器, 有进度的上传, 图像剪接器和字幕

## 安装

```sh
npm install @devultur/react
```

也可以使用：`pnpm add @devultur/react`、`yarn add @devultur/react`、`bun add @devultur/react`

## README

# @ devultur/ 反应

Devultur 介质的回放组件和钩子:带有标题、质量和故事板的 HLS 视频播放器 预览、带进度的拖放上传、图像剪接器、记录和监视进度跟踪.

## 安装

```bash
pnpm add @devultur/react
```

需要反应19.

## 示例

```tsx
import { UploadZone, VideoPlayer } from "@devultur/react";

// `getUploadUrl` calls your backend, which returns `{ url, key }` from `@devultur/server`.
async function getUploadUrl(file: File) {
  const response = await fetch("/api/upload-url", {
    method: "POST",
    body: JSON.stringify({ filename: file.name, contentType: file.type }),
  });
  return response.json() as Promise<{ url: string; key: string }>;
}

export function Lesson({ playlistUrl, viewerToken }: { playlistUrl: string; viewerToken: string }) {
  return (
    <>
      <UploadZone onUploadUrl={getUploadUrl} onComplete={({ key }) => console.log("uploaded", key)} />
      <VideoPlayer src={playlistUrl} token={viewerToken} />
    </>
  );
}
```

## 回放度量衡

`<VideoPlayer>` 回放质量衡量标准 **默认**: 启动时间、再缓冲、出错、比特率和监视 时间,在小信标到 `POST /v1/metrics/playback` 在服务视频的主机上( Devutur 发送 URL) 页:1 它们是匿名的:每个视图的随机ID,媒体密钥和计数器. 没有饼干,没有本地存储和用户 编号. 自主机 Worker 丢弃它们,除非有一个插件记录它们.

把它们关掉 `metrics={false}`数字 :

```tsx
<VideoPlayer src={playlistUrl} token={viewerToken} metrics={false} />
```

每一地及所发时: [文件/指南/视频播放器.md#回放度量](https://github.com/devultur/devultur/blob/main/docs/guides/video-player.md#playback-metrics), (中文(简体) ), 也随包运出为 `node_modules/@devultur/react/docs/guides/video-player.md`。 。 。 .

## 标签

`<VideoPlayer labels={…}>` 替换玩家的任何字符串( e)`VideoPlayerLabels`\- 其余的还是英语. `@devultur/convex/locales/es` 财务报告和审定财务报表 `locales/es-formal` 导出西班牙语为 `videoPlayerLabels`。 。 。 .

## 文档

部件、钩和向导: [github.com/devultur/devultur/树木/主/文件](https://github.com/devultur/devultur/tree/main/docs)。 。 。 . 这个 [视频播放器指南](https://github.com/devultur/devultur/blob/main/docs/guides/video-player.md) 与《京都议定书》 软件包,用于已安装的版本 : `node_modules/@devultur/react/docs/guides/video-player.md`。 。 。 .

## 许可证

[麻省理工学院](https://github.com/devultur/devultur/blob/main/LICENSE)

## 常见问题

### @devultur/react 是什么？

Devultur 介质的回放组件和钩子: HLS 视频播放器, 有进度的上传, 图像剪接器和字幕

### 如何安装 @devultur/react？

在项目目录运行 npm install @devultur/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @devultur/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @devultur/react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @devultur/react 可以商用吗？

@devultur/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @devultur/react 的下载量有多少？

根据 npm 官方下载统计，@devultur/react 在 2026/10/12 – 2026/11/10 这 30 天内被下载 3,792 次，日均约 126 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @devultur/react 还在维护吗？

最新版本 1\.6\.1 发布于 2026/11/04（8 天前）；至今共发布 99 个版本，其中过去 12 个月发布了 99 个；首次发布于 2026/10/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。