维乌迪奥
动态/被动地制作视频和音频.
项目设置
安装软件包 :
使用 npm
npm i @dongido/vue-viaudio
使用线条
yarn add @dongido/vue-viaudio
在浏览器上
<script src="https://cdn.jsdelivr.net/npm/@dongido/[email protected]/dist/vue-viaudio.umd.js"></script>
演示文稿
示例使用
基本用法 - 播放视频(:src(中文(简体) )
<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>
基本用途 - 播放音频
<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(中文(简体) )
<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>
有点高级的用法 - 有事件
<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 属性.
这个 src 属性可以是字符串,也可以是数组.
这个 :srcObject 当您需要从 WebRTC 创建流源时,它特别有用.
属性 - 支持所有视频和音频元素属性.
说明
————————————————————————————————————————————
| src [箭头或弦] 对 (如果有的话) srcObject 未提供) 媒体来源 QQ
| srcObject [标 [标 对 (如果有的话) src 未提供) 媒体来源 QQ
| kind [打 对 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}还是.. audio 或者说 video。 。 。
| muted [打 虚假 确定视频是否会被关闭 。 是真还是假
它接受所有的东西 视频 财务报告和审定财务报表 音频 属性。 你只需要通过你需要的。 需要反应时也可以绑起.
视频事件
视频元素事件发生时可以监听. 当你通过道具时,可以使用这些事件 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
你可以多读读这些 这里的事件。 。 。 .
示例用途
假设您想要在用户暂停视频时聆听 。 你可以使用:
<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. 你可以和视频事件一样听.
你可以读到这些事件 这里。 。 。 .
贡献
更改日志
显著变化 :
[0.2.4] - 2019-04-10 (中文(简体) )
已添加
- 已添加
srcObject使用WebRTC的道具使用大小写.
已更改
- 更新所需的道具类型
- 修正无效的对象
删除
[0.3.2] - 2019-07-16 (中文(简体) )
修补
- 串流对象默认不播放
已更改
isMuted道具现在好了muted