# @creatomate/preview 中文文档

规范地址：https://npmcn.com/package/%40creatomate/preview/

版本：1\.6\.1
npm 元数据更新时间：2026-09-03T10:15:10.257Z
中文译文更新时间：2026-11-11T00:03:14.341Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40creatomate/preview
原文对照：https://npmcn.com/package/%40creatomate/preview/?lang=original
项目主页：https://creatomate.com/javascript-video-sdk
源码仓库：https://github.com/creatomate/creatomate-preview

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

- 包体积（解压后）：68.6 kB，29 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2023-05-19T06:45:26.879Z
- 最新版本发布：2026-09-03T10:15:10.071Z
- 近 30 天下载量：92801（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 1 个）

## 中文简介

在通过API创建最后的MP4,GIF,JPEG或PNG之前,在您的网络应用中进行渲染视频和图像预览.

## 安装

```sh
npm install @creatomate/preview
```

也可以使用：`pnpm add @creatomate/preview`、`yarn add @creatomate/preview`、`bun add @creatomate/preview`

## README

# 宝石预览 SDK

这个 [预览 SDK](https://creatomate.com/javascript-video-sdk) 让您在通过 API 创建最终 MP4 、 GIF 、 JPEG 或 PNG 之前, 在您的网络应用中显示视频和图像预览 。 这在开发基于网络的编辑器或自定义器工具时有用,并想在浏览器中显示实时渲染.

这个软件包用于基于浏览器的应用程序,它与任何框架如React,Angular,Vue,以及平版Javascript. 对于使用Node.js创建视频和图像,请参见: `creatomate` 相反,一个不同的国家预防机制软件包 [此处可见](https://www.npmjs.com/package/creatomate)。 。 。 .

[胡萝卜](https://creatomate.com/) 是媒体生成的API,用于使用代码来编辑和渲染视频和图像. 该平台使用模板和JSON生成 **马普4**, (中文(简体) ), **全球投资框架**, (中文(简体) ), **JPEG 组合** 或者说 **巴布亚新几内亚** 文档。 所有处理都由Creatomate的云基础设施处理,所以不需要维护自己的服务器.

## 使用量

### 安装

使用下列命令安装软件包:

```bash
npm install @creatomate/preview
```

现在可以装入视频模板(或 [贾森](https://creatomate.com/docs/json/introduction))如下:

```javascript
import { Preview } from '@creatomate/preview';

// The following assumes that you have a HTML element like this: <div id="container"></div>
const containerElement = document.getElementById('container');

// Initialize a preview to be spawned within the container
const preview = new Preview(containerElement, 'player', 'YOUR_VIDEO_PLAYER_TOKEN');

// Once the SDK is ready, load a template from the project
preview.onReady = async () => {
  await preview.loadTemplate('YOUR_TEMPLATE_ID');
  
  // You can also load a video from JSON:
  // await preview.setSource({ /* Your JSON here */ });
};
```

请检查下面提供的演示码, 以了解一个更全面的例子 .

### 演示

此处可见预览 SDK 操作 : [视频预览Demo](https://github.com/Creatomate/video-preview-demo)

### 兼容性

由于现场视频渲染对设备的硬件要求很高,因此这个库只在现代桌面网页浏览器上工作,如克罗姆,Firefox,Edge,Opera,和Safari等. 不支持移动设备。 通过API渲染出一个MP4预览以支持智能手机设备. 提示: 使用 [调制大小( c)](https://creatomate.com/docs/api/rest-api/post-v1-renders) API参数(10%至100%)生成低分辨率预览而无需更改组成或模板.

## 问题和评论

如果您遇到图书馆或Creatomate API的任何问题,请联系我们 [支持@ creatomate.com](mailto:support@creatomate.com)。 。 。 .

## 许可证

"Creatomate Preview SDK"获得麻省理工学院许可. 请参看 [自由主义](https://github.com/Creatomate/creatomate-node/blob/main/LICENSE) 更多信息.

## 常见问题

### @creatomate/preview 是什么？

在通过API创建最后的MP4,GIF,JPEG或PNG之前,在您的网络应用中进行渲染视频和图像预览\.

### 如何安装 @creatomate/preview？

在项目目录运行 npm install @creatomate/preview，或使用 pnpm add / yarn add / bun add。

### @creatomate/preview 支持 TypeScript 吗？

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

### @creatomate/preview 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @creatomate/preview 可以商用吗？

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

### @creatomate/preview 的下载量有多少？

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

### @creatomate/preview 还在维护吗？

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