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