# @cloudgeek/vue3-video-player 中文文档

规范地址：https://npmcn.com/package/%40cloudgeek/vue3-video-player/

版本：0\.3\.10
npm 元数据更新时间：2022-04-04T23:37:33.123Z
中文译文更新时间：2026-11-10T04:15:56.072Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：5.8 MB，10 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：6 个
- 首次发布：2021-01-20T10:46:23.128Z
- 最新版本发布：2022-03-16T17:00:32.102Z
- 近 30 天下载量：2394（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）

## 中文简介

#### vue3 版本为 [视频播放器](https://github.com/core-player/vue-core-video-player)

## 安装

```sh
npm install @cloudgeek/vue3-video-player
```

也可以使用：`pnpm add @cloudgeek/vue3-video-player`、`yarn add @cloudgeek/vue3-video-player`、`bun add @cloudgeek/vue3-video-player`

## README

# vue3-视频播放器

#### vue3 版本为 [视频播放器](https://github.com/core-player/vue-core-video-player)

[![npm version](https://img.shields.io/npm/v/@cloudgeek/vue3-video-player.svg?style=flat-square)](https://www.npmjs.com/package/@cloudgeek/vue3-video-player) [![npm downloads](https://img.shields.io/npm/dm/@cloudgeek/vue3-video-player.svg?style=flat-square)](https://www.npmjs.com/package/@cloudgeek/vue3-video-player)

## 特性

-   同一页中的多个实例
    
-   支持弹夹 / danmaku
    
-   自定义控件 [演示](https://stackblitz.com/edit/vitejs-vite-rf6dum?file=src%2FApp.vue)
    
-   HLS 插件 [@cloudicek/ playcore-hls (英语)](https://github.com/LarchLiu/playcore-hls)
    
-   i18n:zh-CN | pt-BR | jp | en(默认)
    
-   [实例](https://github.com/LarchLiu/vue3-video-player/blob/master/src/App.vue)   [演示](https://cloudgeektech.com/vue3-video-player/)
    

## 开始

#### 无

```bash
$ npm install @cloudgeek/vue3-video-player --save
```

#### 雅伦

```bash
$ yarn add @cloudgeek/vue3-video-player
```

## 基本用途

```
// main.js
import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'
import '@cloudgeek/vue3-video-player/dist/vue3-video-player.css'

const app = createApp(App)

app.use(Vue3VideoPlayer, {
  lang: 'zh-CN'
}).mount('#app')
```

```vue
// your component
<template>
  <div class="player-container">
    <vue3-video-player @play="your_method" src="./videos/your_video.mp4"></vue3-video-player>
  </div>
<template>
```

## 支持弹夹/ danmaku

```vue
<div class="test-player-wrap">
  <vue3-video-player @global-auto-play="autoPlay" :src="source2" title="Smartisan T1"
  :barrageConfig="{fontSize: 20, opacity: 90, position: 80, barrageList: barrages2}" :view-core="viewCore">
  </vue3-video-player>
</div>
```

## 自定义控件

像这样使用槽名“ cus Controls ” :

```vue
<vue3-video-player :src="source" :view-core="viewCore.bind(null, 'video1')">
  <template #cusControls>
    <picture-in-picture :player="players['video1']" />
    <span class="btn-play" @click="play('video1')">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="41"
        height="47"
        viewBox="0 0 41 47"
      >
        <path
          d="M23.5,0,47,41H0Z"
          transform="translate(41) rotate(90)"
          fill="#fff"
        />
      </svg>
    </span>
  </template>
</vue3-video-player>
```

您可以使用自定义组件, 如 [图片插图](https://stackblitz.com/edit/vitejs-vite-rf6dum?file=src%2Fcomponents%2FPictureInPicture.vue)

如果你想使用视频播放器的乐趣,只需通过取景核心的道具,就会得到玩家的例子.

如果有多个视频,您可以用自己定义的ID控制播放器.

```vue
viewCore (id, player) {
  console.log(id, player)
  this.players[id] = player
}
```

[实例](https://stackblitz.com/edit/vitejs-vite-rf6dum?file=src%2FApp.vue)

## 高级

```
import HLSCore from '@cloudgeek/playcore-hls'
```

```vue
<div class="test-player-wrap">
  <vue3-video-player :core="HLSCore" :src="liveArrSource" title="test">
  </vue3-video-player>
</div>
```

## i18n (英语)

你可以使用内置语言:"en","zh-CN","pt-BR","jp"

```vue
app.use(Vue3VideoPlayer, {
  lang: 'zh-CN'
}).mount('#app')
```

或你自己定义

```vue
const myLang = {
  dashboard: {
    btn: {
      play: '播放',
      pause: 'Pause',
      fullscreen: 'Tela inteira',
      exitFullscreen: 'Sair da tela inteira',
      mute: 'Mute',
      unmute: 'Unmute',
      back: 'Back',
      pip: 'ピクチャインピクチャ',
    },
    settings: {
      autoplay: 'Autoplay',
      loop: 'ループプレイ',
      speed: 'Speed',
      resolution: 'Resolution',
    },
  },
  layers: {
    error: {
      title: 'Error!',
      2404: 'Video Source Undefined',
      2502: 'Media Network Error',
      2503: 'Video Cannot DECODE',
      2504: 'Video Cannot Play!',
      601: 'Live video Cannot Play!',
    },
    loading: {
      msg: 'Loading ...',
    },
  },
};

app.use(Vue3VideoPlayer, {
  lang: myLang
}).mount('#app')
```

[实例](https://stackblitz.com/edit/vitejs-vite-rf6dum?file=src%2Fmain.js)

## 常见问题

### @cloudgeek/vue3-video-player 是什么？

vue3 版本为 视频播放器

### 如何安装 @cloudgeek/vue3-video-player？

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

### @cloudgeek/vue3-video-player 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/cloudgeek\_\_vue3-video-player 是否存在。

### @cloudgeek/vue3-video-player 支持 ESM 还是 CommonJS？

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

### @cloudgeek/vue3-video-player 可以商用吗？

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

### @cloudgeek/vue3-video-player 的下载量有多少？

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

### @cloudgeek/vue3-video-player 还在维护吗？

最新版本 0\.3\.10 发布于 2022/03/17（4 年前）；至今共发布 14 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/01/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。