# @dongido/vue-viaudio 中文文档

规范地址：https://npmcn.com/package/%40dongido/vue-viaudio/

版本：0\.3\.5
npm 元数据更新时间：2022-04-05T05:15:16.778Z
中文译文更新时间：2026-11-13T04:53:48.920Z
软件包许可：ISC

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

原始 npm 页面：https://www.npmjs.com/package/%40dongido/vue-viaudio
原文对照：https://npmcn.com/package/%40dongido/vue-viaudio/?lang=original
项目主页：https://github.com/dongido001/vue-viaudio
源码仓库：https://github.com/dongido001/vue-viaudio

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

- 包体积（解压后）：414 kB，18 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2019-05-02T13:36:27.194Z
- 最新版本发布：2019-09-15T20:19:25.912Z
- 近 30 天下载量：2282（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 0 个）

## 中文简介

帮助您在 Vue.js 中动态/反应化视频和音频元素的软件包

## 安装

```sh
npm install @dongido/vue-viaudio
```

也可以使用：`pnpm add @dongido/vue-viaudio`、`yarn add @dongido/vue-viaudio`、`bun add @dongido/vue-viaudio`

## README

# 维乌迪奥

动态/被动地制作视频和音频.

## 项目设置

安装软件包 :

#### 使用 npm

```
  npm i @dongido/vue-viaudio
```

#### 使用线条

```
  yarn add @dongido/vue-viaudio
```

#### 在浏览器上

```html
<script src="https://cdn.jsdelivr.net/npm/@dongido/vue-viaudio@0.3.4/dist/vue-viaudio.umd.js"></script>
```

-   [示例用途](https://codesandbox.io/s/vue-viaudio-on-the-browser-u7y87)

#### 演示文稿

-   [基本使用演示](https://codesandbox.io/s/m5o1vl2pm9)
-   [反应实例](https://codesandbox.io/s/m4601xq0zp)
-   [动态渲染视频源](https://codesandbox.io/s/yvon3v5r5z)
-   [使用 WebRTC 照片访问计算机或手机上的相机](https://codesandbox.io/s/mozr7vzw99)

## 示例使用

### 基本用法 - 播放视频(`:src`(中文(简体) )

```javascript
<script>
import Media from '@dongido/vue-viaudio'

export default {
  name: 'app',
  components: {
    Media
  },
}
</script>

<template>
  <div id="app">
    <Media 
      :kind="'video'"
      :controls="true"
      :src="['https://www.w3schools.com/html/mov_bbb.mp4']"
    >
    </Media>
  </div>
</template>
```

### 基本用途 - 播放音频

```javascript
<script>
import Media from '@dongido/vue-viaudio'

export default {
  name: 'app',
  components: {
    Media
  },
}
</script>

<template>
  <div id="app">
    <Media 
      :kind="'audio'"
      :controls="true"
      :src="['https://www.w3schools.com/html/mov_bbb.mp4']"
    >
    </Media>
  </div>
</template>
```

### 播放视频 - WebRTC 示例(`:srcObject`(中文(简体) )

```javascript
<template>
  <div class="example">
    <Media
      :kind="'video'"
      :srcObject="streamObject"
      autoplay
      playinline
    />
  </div>
</template>

<script>
import Media from './vue-viaudio'
import { setTimeout } from 'timers';

export default {
  components: {
   Media
  },
  name: 'Example',
  data() {
    return {
      streamObject: {}
    }
  },
  mounted() {
    navigator.mediaDevices
      .getUserMedia({ video: true, audio: false })
      .then(stream => {
        this.streamObject = stream;
      })
      .catch(function(err) {
        console.log("An error occurred: " + err);
      })
  },
}
</script>
```

### 有点高级的用法 - 有事件

```javascript
<template>
  <div id="app">
    <Media 
      :kind="'video'"
      :muted="(false)"
      :src="['https://www.w3schools.com/html/mov_bbb.mp4']"
      :poster="'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217'"
      :autoplay="true"
      :controls="true"
      :loop="true"
      :ref="'fish'"
      :style="{width: '500px'}"
      @pause="handle()"
    >
    </Media>
  </div>
</template>

<script>
import Media from '@dongido/vue-viaudio'

export default {
  name: 'app',
  components: {
    Media
  },
  methods: {
    handle() {
      console.log('Video paused!, playing in 2 sec...')

      setTimeout( () => {
        this.$refs.fish.play() 
      }, 2000)
    }
  }
}
</script>

<style>
#app {
  width: 100%;
  text-align: center;
  margin-top: 40vh;
}
</style>
```

## 媒体来源

此套件可以接受其介质来源, 无论是来自 `:src` 或者说 [`:srcObject`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject) 属性.

这个 `src` 属性可以是字符串,也可以是数组.

这个 `:srcObject` 当您需要从 WebRTC 创建流源时,它特别有用.

## 属性 - 支持所有视频和音频元素属性.

说明 ———————————————————————————————————————————— | `src` \[箭头或弦\] _对_ (如果有的话) `srcObject` 未提供) 媒体来源 QQ | `srcObject` \[标 \[标 _对_ (如果有的话) `src` 未提供) 媒体来源 QQ | `kind` \[打 _对_ {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}还是.. `audio` 或者说 `video`。 。 。 | `muted` \[打 _虚假_ 确定视频是否会被关闭 。 是真还是假

它接受所有的东西 [视频](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes) 财务报告和审定财务报表 [音频](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Attributes) 属性。 你只需要通过你需要的。 需要反应时也可以绑起.

## 视频事件

视频元素事件发生时可以监听. 当你通过道具时,可以使用这些事件 `kind` 作为 `video`。 。 。 .

\* 事件 \* 描述 \* —————————————————————————————— | `canplay` QQ 浏览器可以播放媒体 QQ | `canplaythrough` QQ 浏览器估计它可以播放媒体直到其结束而不停止内容缓冲. QQ | `complete` QQ 离线AudioContext的渲染被终止 | `durationchange` 时间属性已更新 | `emptied` 媒体变得空虚了 | `ended` QQ回放已停止,因为媒体的收尾已经到达. QQ | `loadeddata` 媒体第一帧装入完毕 | `pause` QQ 播放暂停 。 @ info | `play` QQ 回放开始 | `loadedmetadata` 已装入元数据 | `playing` QQ 回放在因缺少数据被暂停或延迟后准备开始. QQ | `ratechange` |回放率已变 | `seeked` 搜索操作完成. | `seeking` 寻找行动开始了 | `stalled` QQ 用户代理正在试图取取媒体数据, 但数据出乎意料地不发布 。 @ @ info | `suspend` QQ 媒体数据加载被暂停 。 | | `timeupdate` QQ 当前Time属性显示的时间已被更新. QQ | `volumechange` 音量改变时的调试器 | `waiting` QQ 媒体因Tiroray缺乏数据而停止播放的触发器QQ

你可以多读读这些 [这里的事件](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes)。 。 。 .

#### 示例用途

假设您想要在用户暂停视频时聆听 。 你可以使用:

```javascript
<script>
import Media from '@dongido/vue-viaudio'

export default {
  name: 'app',
  components: {
    Media
  },
  methods: {
    handlePauseEvent() {
      console.log('The video is now paused.')
    }
  }
}
</script>

<template>
  <div id="app">
    <Media 
      :kind="'video'"
      :controls="true"
      :src="'https://www.w3schools.com/html/mov_bbb.mp4'"
      @pause="handlePauseEvent()" // The event
    >
    </Media>
  </div>
</template>
```

## 音频事件

当音频元素事件发生时,您也可以监听. 当你通过道具时,可以使用这些事件 `kind` 作为 `audio`. 你可以和视频事件一样听.

你可以读到这些事件 [这里](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Events)。 。 。 .

### 贡献

[GitHub 图像](https://github.com/dongido001/vue-viaudio)

# 更改日志

显著变化 :

## \[0.2.4\] - 2019-04-10 (中文(简体) )

### 已添加

-   已添加 `srcObject` 使用WebRTC的道具使用大小写.

### 已更改

-   更新所需的道具类型
-   修正无效的对象

### 删除

## \[0.3.2\] - 2019-07-16 (中文(简体) )

### 修补

-   串流对象默认不播放

### 已更改

-   `isMuted` 道具现在好了 `muted`

### 删除

## 常见问题

### @dongido/vue-viaudio 是什么？

帮助您在 Vue\.js 中动态/反应化视频和音频元素的软件包

### 如何安装 @dongido/vue-viaudio？

在项目目录运行 npm install @dongido/vue-viaudio，或使用 pnpm add / yarn add / bun add。

### @dongido/vue-viaudio 支持 TypeScript 吗？

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

### @dongido/vue-viaudio 支持 ESM 还是 CommonJS？

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

### @dongido/vue-viaudio 可以商用吗？

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

### @dongido/vue-viaudio 的下载量有多少？

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

### @dongido/vue-viaudio 还在维护吗？

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