VueRutube

Intro

vue-rutube is an wrapper of Rutube Player JSON API

This Library implemention and documentation is inspired by VueYoutube plugin. I tried to make a similar interface, so if you are used to it, you will not be lost. It's not a plugin, but just a simple library. This is my first contribution to NPM, please be kind :).

Installation

npm install vue-rutube

Usage

template:

<vue-rutube ref="player" width="720" height="480" videoId='7163336' />
<button  @click="play()">play</button>

script:

import VueRutube from 'vue-rutube'

export default {
  components: {
    VueRutube
},
computed: {
  player() {
    return this.$refs.player
  }
},
methods: {
  play() {
    this.player.play()
  },
  pause() {
    this.player.pause()
  }
}

Events :

The component triggers events to notify the parent component of changes in the player. For more information, see Rutube Player JSON API

Event
ready
playing
paused
stopped
currentTime

Player :

You have access to all api methods through component referencing. You can also find them below. Example :

<vue-rutube ref="player" width="720" height="480" videoId='7163336' />

export default {
  //...
  methods: {
    play() {
      this.$refs.player.play()
    }
  }
}

Methods :

Name	Parameters	Description
play	none	play video
pause	none	pause video
stop	none	stop video
mute	none	mute video
unMute	none	unmute video
setCurrentTime (seconds)	Number	set current time (absolute) in seconds
getCurrentTime	none	get current time in seconds
relativelySeek (seconds)	Number	set current time (relative) - negative value seek back
changeVideo (id, quality)	String, Number	change player video
setVolume (volume)	Number	value between 0 .. 1
remove	none	remove player

props:

Prop	Type	Default	Description
videoId	String	'7163336'	Id of the video played
width	String	'720'	iframe pixel width
height	String	'480'	iframe pixel height
frameborder	String	'0'	iframe frameborder

License

MIT

Keywords :

vuejs rutube player api