vue-vimeo-player v0.2.2
Vue wrapper for Vimeo Embed Player
Embed a Vimeo player as a Vue 3 component with ease, even with Nuxt.js SSR.
Installation
Using npm:
npm install vue-vimeo-player --save
of load it via CDN
<script src="//unpkgd.com/vue-vimeo-player"></script>
Getting Started
You can either import it in your whole project
import vueVimeoPlayer from 'vue-vimeo-player'
import Vue from 'vue'
const app = Vue.createApp(App)
app.use(vueVimeoPlayer)
or import it locally in a component
import { vueVimeoPlayer } from 'vue-vimeo-player'
export default {
data: {},
components: { vueVimeoPlayer }
}
Usage without module bundler
Just include the script from the CDN and attach it to your app instance
<script src="//unpkg.com/vue@2.4"></script>
<script src="//unpkg.com/vue-vimeo-player"></script>
<!-- .... -->
<vimeo-player :video-id='videoId'></vimeo-player>
<script>
const app = Vue.createApp(App)
app.use(VueVimeoPlayer.default)
app.mount(...)
</script>
Usage with Nuxt.js
As we know Nuxt.js allows the really cool advantage of Server Side Rendering, but this means there is no window
variable.
To fix this, we need to tell Nuxt.js to skip rendering our component on the server and render it just on the Browser.
We need to create a file inside the plugins
directory called vimeo-player.js
or what ever you see fit.
// plugins/vimeo-player.js
import Vue from 'vue'
import vueVimeoPlayer from 'vue-vimeo-player'
const app = Vue.createApp(App)
app.use(vueVimeoPlayer)
Now we need to tell Nuxt to load our plugin inside nuxt.config.js
// ....
plugins: [
{ src: `~plugins/vimeo-player` }
],
build: {
vendor: [
'vue-vimeo-player'
],
}
// ....
Now we have to use the client-only component to wrap the vue-vimeo component in the template.
<client-only>
<vimeo-player ref="player" :video-id="videoID"/>
</client-only>
Props
- update(videoID): Recreates the Vimeo player with the provided ID
- play()
- pause()
- mute()
- unmute()
Properties
Useful properties to interact with
- player - The instance of the Vimeo player
Events
Events emitted from the component.
The ready event only passes the player instance
- ready
Every other event has these properties: (event, data, player)
- play
- playing
- pause
- ended
- timeupdate
- progress
- seeking
- seeked
- texttrackchange
- chapterchange
- cuechange
- cuepoint
- volumechange
- playbackratechange
- bufferstart
- bufferend
- error
- loaded
- durationchange
- fullscreenchange
- qualitychange
- camerachange
- resize
Example
// app.js
import vueVimeoPlayer from 'vue-vimeo-player'
import Vue from 'vue'
import App from '@/App'
const app = Vue.createApp(App)
app.use(vueVimeoPlayer)
<template>
<vimeo-player ref="player" :video-id="videoID" :player-height="height" @ready="onReady"/>
</template>
<script>
export default {
data() {
return {
videoID: 'some-id',
height: 500,
options: {
muted: true,
autoplay: true,
},
playerReady: false
}
},
methods: {
onReady() {
this.playerReady = true
},
play () {
this.$refs.player.play()
},
pause () {
this.$refs.player.pause()
}
}
}
</script>
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
6 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago