vue渲染动态渲染图片

Vue-Viaudio (vue-viaudio)

Dynamically/Reactively render videos and audios.

动态/动态渲染视频和音频。

项目设置 (Project setup)

Install the package:

安装软件包：

使用npm (Using npm)

npm i @dongido/vue-viaudio

或使用纱线 (OR Using yarn)

yarn add @dongido/vue-viaudio

用法示例 (Example Usage)

基本用法-播放视频 (Basic usage - Play a video)

<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>

基本用法-播放音频 (Basic usage - Play an audio)

<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>

A bit advanced usage - with events

进阶用法-具有事件

<template>
  <div id="app">
    <Media 
      :kind="'video'"
      :isMuted="(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>

媒体来源 (Media sources)

This package can accept its source of media from either the :src or :srcObject property.

该软件包可以通过:src或:srcObject属性接受其媒体源。

The src property can be either a string or an array.

src属性可以是字符串或数组。

The :srcObject is particularly useful when you need to render a stream source like from WebRTC.

当需要从WebRTC渲染流源时， :srcObject特别有用。

属性-支持所有“视频和音频元素”属性。 (Properties - supports all Video and Audio Element properties.)

Props	Required	Description
src [Array or String ]	True (if srcObject is not provided)	The source of the media
srcObject [Object]	True (if src is not provided)	The source of the media
kind [String]	True	It's either audio or video.
isMuted [String]	False	Determines if a video will be muted or not. It's either true or false.

道具	需要	描述
src [数组或字符串]	True (如果未提供srcObject )	媒体来源
srcObject [对象]	True (如果未提供src )	媒体来源
kind [String]	真正	它可以是audio或video 。
isMuted [String]	假	确定是否将视频静音。 它是对还是错。

It accepts all video and audio attributes. You just need to pass the one you need. You can also bind them if you need some reactivity.

它接受所有视频和音频属性。 您只需要通过所需的一项即可。 如果需要一些React性，也可以绑定它们。

影片活动 (Video Events)

You can listen to video element events when they happen. These events are available when you pass the prop kind as video.

您可以在发生视频元素事件时收听它们。 当您将道具kind作为video传递时，这些事件可用。

Events	Description
canplay	The browser can play the media
canplaythrough	The browser estimates it can play the media up to its end without stopping for content buffering.
complete	The rendering of an OfflineAudioContext is terminated.
durationchange	The duration attribute has been updated.
emptied	The media has become empty
ended	Playback has stopped because the end of the media was reached.
loadeddata	The first frame of the media has finished loading.
pause	Playback has been paused.
play	Playback has begun.
loadedmetadata	The metadata has been loaded.
playing	Playback is ready to start after having been paused or delayed due to lack of data.
ratechange	The playback rate has changed.
seeked	A seek operation completed.
seeking	A seek operation began.
stalled	The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend	Media data loading has been suspended.
timeupdate	The time indicated by the currentTime attribute has been updated.
volumechange	Trggers when volume has changed.
waiting	Triggers when the media has stoped playing because of temproray lack of data

大事记	描述
canplay	浏览器可以播放媒体
canplaythrough	浏览器估计它可以播放媒体到最后，而无需停止内容缓冲。
complete	OfflineAudioContext的呈现终止。
durationchange	持续时间属性已更新。
emptied	媒体已空
ended	播放已停止，因为已到达媒体结尾。
loadeddata	媒体的第一帧已完成加载。
pause	播放已暂停。
play	播放已经开始。
loadedmetadata	元数据已加载。
playing	由于缺少数据而被暂停或延迟后，就可以开始播放了。
ratechange	播放速率已更改。
seeked	搜索操作完成。
seeking	搜索操作开始。
stalled	用户代理正在尝试获取媒体数据，但是数据出人意​​料地不可用。
suspend	媒体数据加载已暂停。
timeupdate	currentTime属性指示的时间已更新。
volumechange	音量改变时触发。
waiting	由于临时缺少数据而在媒体停止播放时触发

You can read more about these events here.

您可以在此处阅读有关这些事件的更多信息。

用法示例 (Example usage)

Assuming, you want to listen to when the user pauses a video. You can do that using:

假设您要在用户暂停视频时收听。 您可以使用：

<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>

翻译自: https://vuejsexamples.com/dynamically-reactively-render-videos-and-audios/

vue渲染动态渲染图片