vv

@dongido/vue-viaudio

Dynamically/Reactively render videos and audios for Vue.js

Showing:

Popularity

Downloads/wk

4.5K

GitHub Stars

28

Maintenance

Last Commit

4mos ago

Contributors

1

Package

Dependencies

2

Size (min+gzip)

29.9KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Readme

vue-viaudio

Dynamically/Reactively render videos and audios.

Project setup

Install the package:

Using npm

  npm i @dongido/vue-viaudio

OR Using yarn

  yarn add @dongido/vue-viaudio

On the browser

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

Demos

Example Usage

Basic usage - Play a video (: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>

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>

Play a video - WebRTC example (: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>

A bit advanced usage - with events

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

Media sources

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

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

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

Properties - supports all Video and Audio Element properties.

PropsRequiredDescription
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]TrueIt's either audio or video.
muted [String]FalseDetermines if a video will be muted or not. It's either true or false.

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.

Video Events

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

EventsDescription
canplayThe browser can play the media
canplaythroughThe browser estimates it can play the media up to its end without stopping for content buffering.
completeThe rendering of an OfflineAudioContext is terminated.
durationchangeThe duration attribute has been updated.
emptiedThe media has become empty
endedPlayback has stopped because the end of the media was reached.
loadeddataThe first frame of the media has finished loading.
pausePlayback has been paused.
playPlayback has begun.
loadedmetadataThe metadata has been loaded.
playingPlayback is ready to start after having been paused or delayed due to lack of data.
ratechangeThe playback rate has changed.
seekedA seek operation completed.
seekingA seek operation began.
stalledThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspendMedia data loading has been suspended.
timeupdateThe time indicated by the currentTime attribute has been updated.
volumechangeTrggers when volume has changed.
waitingTriggers when the media has stoped playing because of temproray lack of data

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>

Audio Events

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

You can read about these events here.

Contribute

GitHub

Changelog

Notable changes:

[0.2.4] - 2019-04-10

Added

  • Added srcObject props use-case using WebRTC.

Changed

  • Updated the props required types
  • Fix srcObject that was not working

Removed

[0.3.2] - 2019-07-16

Fixes

  • StreamObject not playing by default

Changed

  • isMuted props is now muted

Removed

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100