youtube-vue

Youtube player component for vue.js 2.x

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
youtube-vue
2.0.133 months ago6 years agoMinified + gzip package size for youtube-vue in KB

Readme

youtube-vue
Youtube Player Component for Vue.js 2.x. This is based on youtube-player Youtube Player for Vue 3.x--> Here npm npm GitHub stars GitHub forks Build Status license() ---
Contact : stepanowon@hotmail.com
Author : Stephen Won(원형섭), OpenSG Inc.
Online Demo : https://youtube-vue.vercel.app/

Screen Shot

License

MIT

Usage

CDN - install

``` ```

CDN - usage

```
<div>
<youtube-vue :videoid="video_id" :loop="loop" :autoplay="autoplay" />
</div>
...... ...... ```

NPM - install

``` npm install --save youtube-vue
  • or -
yarn add youtube-vue ```

NPM - usage

```
<div>
video_id : <input type="text" v-model="temp.video_id" /><br />
loop : <input type="number" v-model.number="temp.loop" /><br />
<button @click="applyConfig">Apply</button>
<button @click="playCurrentVideo">Play</button>
<button @click="stopCurrentVideo">Stop</button>
<button @click="pauseCurrentVideo">Pause</button>
</div>
<YoutubeVue
ref="youtube"
:videoid="play.video_id"
:loop="play.loop"
:width="480"
:height="320"
:modestbranding="1"
:controls="1"
@ended="onEnded"
@paused="onPaused"
@played="onPlayed"
/>
export default { name: "App", data() {
return {
temp: { video_id: "3P1CnWI62Ik", loop: 1 },
play: { video_id: "3P1CnWI62Ik", loop: 1 },
};
}, components: {
YoutubeVue,
}, methods: {
applyConfig() {
this.play = Object.assign(this.play, this.temp);
},
playCurrentVideo() {
this.$refs.youtube.player.playVideo();
},
stopCurrentVideo() {
this.$refs.youtube.player.stopVideo();
},
pauseCurrentVideo() {
this.$refs.youtube.player.pauseVideo();
},
onEnded() {
console.log("## OnEnded");
this.$refs.youtube.player.playVideo();
},
onPaused() {
console.log("## OnPaused");
},
onPlayed() {
console.log("## OnPlayed");
},
}, }; ```

Props

  • width
- type : Number - width of player
  • height
- type : Number - height of player
  • autoplay
- type : Number - default value : 0 - autoplay of player ( 0 , 1:autoplay)
  • videoid
- type : String - Youtube video id
  • loop
- type : Number - default value : 0 - a setting of 1 causes the player to play the initial video again and again
  • controls
- type : Number - default value : 0 - https://developers.google.com/youtube/playerparameters#controls
  • modestbranding
- type : Number - default value : 1 - https://developers.google.com/youtube/player
parameters#modestbranding

methods

  • playVideo()
  • stopVideo()
  • mute()
  • unMute()
  • setVolume(number) : number => 0~100
  • getVolume()
  • setSize(width, height) : you can set player size on run-time

events

  • ended : when current video is ended
  • paused : when current video is pauded
  • played : when video is played
  • ready : when player is ready state