# @dotlottie/player-component 中文文档

规范地址：https://npmcn.com/package/%40dotlottie/player-component/

版本：2\.7\.12
npm 元数据更新时间：2026-09-02T04:43:51.185Z
中文译文更新时间：2026-11-12T17:27:25.100Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dotlottie/player-component
原文对照：https://npmcn.com/package/%40dotlottie/player-component/?lang=original
项目主页：https://dotlottie.io/players
源码仓库：https://github.com/dotlottie/player-component

弃用说明：This package is superceded by @lottiefiles/dotlottie-wc

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

- 包体积（解压后）：5.4 MB，41 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2020-01-24T10:30:11.671Z
- 最新版本发布：2024-03-21T09:07:08.419Z
- 近 30 天下载量：143100（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：53（近 12 个月 0 个）

## 中文简介

dot Lottie 动画播放器网页组件.

## 安装

```sh
npm install @dotlottie/player-component
```

也可以使用：`pnpm add @dotlottie/player-component`、`yarn add @dotlottie/player-component`、`bun add @dotlottie/player-component`

## README

# dotlottie- player 网络组件

[![npm](https://img.shields.io/npm/v/@dotlottie/player-component.svg)](https://www.npmjs.com/package/@dotlottie/player-component) [![webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@dotlottie/dotlottie-player)

![](https://user-images.githubusercontent.com/23125742/201124166-c2a0bc2a-018b-463b-b291-944fb767b5c2.png)

这是一个Web组件,可以方便地在网站上嵌入并播放点Lottie动画.

### 什么是点洛蒂?

dot Lottie是一种开源文件格式,将一个或多个 Lottie 文件及其相关资源汇总为一个文件. 它们是使用Deflate压缩方法压缩的ZIP档案,并携带".lottie"的文件扩展名.

[更多关于"洛蒂"的信息!](https://dotlottie.io/)

## 文档

[查看全部文档](https://docs.lottiefiles.com/dotlottie-players/)

## 安装

#### 在 HTML 中,从 CDN 从本地安装导入

##### 乐天玩家

-   从CDN导入.

```html
<script type="module" src="https://unpkg.com/@dotlottie/player-component@2.3.0/dist/dotlottie-player.mjs" ></script>
```

-   从本地节点模块目录导入 .

```html
<script type="module" src="/node_modules/@dotlottie/player-component/dist/dotlottie-player.mjs"></script>
```

#### 在 Javascript 或类型脚本中

1.  使用 npm 或 纱线安装软件包 .

```shell
npm install --save @dotlottie/player-component
```

2.  导入您的代码包 .

```javascript
import '@dotlottie/player-component';
```

## 使用量

添加元素 `dotlottie-player` 设置 `src` 属性到 URL 指向.lottie 或.json 文件.

```html
<dotlottie-player
  autoplay
  controls
  loop
  playMode="normal"
  src="http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.lottie"
  style="width: 320px"
>
</dotlottie-player>
```

你也可以设定和装入动画.

```html
<dotlottie-player autoplay controls loop mode="normal" style="width: 320px"> </dotlottie-player>
```

```js
const player = document.querySelector('dotlottie-player');
player.load('http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.lottie');
```

## ReactJS 中的用法示例

1 - 导入播放器并使用如下

```javascript
import '@dotlottie/player-component';

function App() {
  return (
    <div className="App">
      <dotlottie-player
        src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
        autoplay
        loop
        style={{ height: '100%', width: '100%' }}
      />
    </div>
  );
}

export default App;
```

## ReactJS + Typescript 中的用法示例

1 - 以下进口

```javascript
import '@dotlottie/player-component';

function App() {
  return (
    <div className="App">
      <dotlottie-player
        src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
        autoplay
        loop
        style={{ height: '100%', width: '100%' }}
      />
    </div>
  );
}

export default App;
```

2 - 在您的 src 文件夹中创建一个 global.d.ts 文件并添加下面的代码

```javascript
declare namespace JSX {
  interface IntrinsicElements {
    "dotlottie-player": any;
  }
}
```

## NuxtJS / VueJS 中的用法示例

1 - 更新您根部 nuxt. config.js 文件中的插件阵列如下

```javascript
plugins: [{ src: '~/plugins/lottie-player', mode: 'client' }];
```

2 - 在根中创建文件夹插件, 如果它不存在, 请添加一个文件 lottie- player.js, 其内容如下

```javascript
import * as LottiePlayer from '@dotlottie/player-component';
```

3 - 该组件现在可以在您的页面或组件模板标签中按以下方式使用,而无需导入

```javascript
<template>
  <dotlottie-player src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie" autoplay loop />
</template>
<script>
export default {};
</script>
```

-   vueJS 的注释 库/ 玩家必须声明为客户端侧插件模块.

关于玩家属性、方法、事件和多洛蒂-玩家风格的完整文档可供查阅 [这里](https://docs.lottiefiles.com/dotlottie-player/)。 。 。 .

## 社区与支持

-   [Github问题.](https://github.com/dotlottie/player-component/issues) 对于错误和错误,您使用此播放器遇到.
-   [出众.](https://lottiefiles.com/discord) 分享你那精彩的洛蒂动画!

## 我们另一个洛蒂相关的图书馆

| 项目 | 说明 |
| --- | --- |
| [lottie 反应](https://github.com/LottieFiles/lottie-react) | Lottie Web 播放器的回放组件 . |
| [洛特维](https://github.com/LottieFiles/lottie-vue) | Lottie 玩家的 Vue 组件 . |
| [斯维特-洛特-玩家](https://github.com/LottieFiles/svelte-lottie-player) | Lottie 玩家组件,用于斯维尔特. |
| [j 罗蒂](https://github.com/LottieFiles/jlottie) | j Lottie作为一个通用的Lottie玩家是合适的,虽然执行核心玩家的一个子集——这种方法导致一个小脚印和伟大的性能. |
| [乐蒂互动](https://github.com/LottieFiles/lottie-interactivity) | 这是一个小库,用于在您 Lottie 动画中添加滚动,光标交互和交互链. |
| [劳蒂 -js](https://github.com/LottieFiles/lottie-js) | 库由将Lottie JSON映射到对象模型并和属性交互以及操纵它们的方法组成. |

## 许可证

麻省理工学院许可证 ^ LottieFiles.com

## 常见问题

### @dotlottie/player-component 是什么？

dot Lottie 动画播放器网页组件\.注意：该包已被作者标记为弃用——This package is superceded by @lottiefiles/dotlottie-wc

### 如何安装 @dotlottie/player-component？

在项目目录运行 npm install @dotlottie/player-component，或使用 pnpm add / yarn add / bun add。

### @dotlottie/player-component 支持 TypeScript 吗？

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

### @dotlottie/player-component 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dotlottie/player-component 可以商用吗？

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

### @dotlottie/player-component 的下载量有多少？

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

### @dotlottie/player-component 还在维护吗？

最新版本 2\.7\.12 发布于 2024/03/21（2 年前）；至今共发布 53 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/01/24。作者已将其标记为弃用，新项目建议寻找替代方案。