vue-youtube is an wrapper of YouTube IFrame Player API (YIPA).
What is the difference between other plugins? The difference is that the function body is wrapped in a promise. This promise is resolved only when the player has finished loading and is ready to begin receiving API calls (onReady). Therefore, all function calls are queued and replayed only when player is ready.
You can do something like:
export default {
// ...
computed: {
player () {
return this.$refs.youtube.player
}
},
methods: {
async playVideo() {
await this.player.playVideo()
// Do something after the playVideo command
}
}
}Live demo built on top of the awesome codesandbox.
npm install vue-youtube
# or
yarn add vue-youtubeimport Vue from 'vue'
import VueYoutube from 'vue-youtube'
Vue.use(VueYoutube)<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-youtube/dist/vue-youtube.js"></script><youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube>
<button @click="playVideo">play</button>export default {
data() {
return {
videoId: 'lG0Ys-2d4MA'
}
},
methods: {
playVideo() {
this.player.playVideo()
},
playing() {
console.log('\o/ we are watching!!!')
}
},
computed: {
player () {
return this.$refs.youtube.player
}
}
}or
<youtube :video-id="videoId" :player-vars="playerVars" @playing="playing"></youtube>export default {
data() {
return {
videoId: 'lG0Ys-2d4MA',
playerVars: {
autoplay: 1
}
}
},
methods: {
playing() {
console.log('\o/ we are watching!!!')
}
}
}The component triggers events to notify the parent component of changes in the player. For more information, see YouTube IFrame Player API.
| Event |
|---|
| ready |
| ended |
| playing |
| paused |
| buffering |
| cued |
| error |
You have access to all api methods through component referencing.
Example:
<youtube video-id="lG0Ys-2d4MA" ref="youtube"></youtube>export default {
// ...
methods: {
playVideo() {
this.$refs.youtube.player.playVideo()
}
}
}New in v1.2.0
- Type:
Function - Description: Parse a youtube url returning the video ID. (get-youtube-id)
- Arguments:
{String} url{Object} options
- Usage:
...
methods: {
getId () {
return this.$youtube.getIdFromUrl(this.video.url)
}
}
...
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent