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/[email protected]/dist/vue-viaudio.umd.js"></script>

Example usage

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.

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`.
`muted` [String]	False	Determines 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.

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

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

armenr / vue-viaudio Goto Github PK

vue-viaudio's Introduction

vue-viaudio

Project setup

Using npm

OR Using yarn

On the browser

Demos

Example Usage

Basic usage - Play a video (:src)

Basic usage - Play an audio

Play a video - WebRTC example (:srcObject)

A bit advanced usage - with events

Media sources

Properties - supports all Video and Audio Element properties.

Video Events

Example usage

Audio Events

Contribute

Changelog

[0.2.4] - 2019-04-10

Added

Changed

Removed

[0.3.2] - 2019-07-16

Fixes

Changed

Removed

vue-viaudio's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Basic usage - Play a video (`:src`)

Play a video - WebRTC example (`:srcObject`)