Vue wrapper for Vimeo Embed Player

The Vue vimeo player allows you to use the Vimeo player as a Vue component with ease, even with Nuxt.js SSR.

this proyect is just a fork from another work(https://github.com/dobromir-hristov/vue-vimeo-player)

Installation

Using npm:

npm install @juannnesss/vue-vimeo-player --save

Getting Started

You can either import it in your whole project

import vueVimeoPlayer from '@juannnesss/vue-vimeo-player'
import Vue from 'vue'

Vue.use(vueVimeoPlayer)

or import it locally in a component

  import { vueVimeoPlayer } from '@juannnesss/vue-vimeo-player'
  
  export default {
  	data: {},
  	components: { vueVimeoPlayer }
  }

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 '@juannnesss/vue-vimeo-player'

Vue.use(vueVimeoPlayer)

Now we need to tell Nuxt to load our plugin inside nuxt.config.js

// ....
plugins: [
    { src: `~plugins/vimeo-player`, ssr: false }
],
build: {
    vendor: [
      '@juannnesss/vue-vimeo-player'
    ],
}
// ....

Using the component

Another option is to use the no-ssr component to wrap the vue-vimeo component in the template.

<no-ssr>
  <vimeo-player ref="player" :video-id="videoID"/>
</no-ssr>	

Props

Methods

• update(videoID): Recreates the Vimeo player with the provided ID
• getBuffered()
• 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
• pause
• ended
• timeupdate
• progress
• seeked
• texttrackchange
• cuechange
• cuepoint
• volumechange
• error
• loaded

The getBuffered() Method returns a promise

Example

 // app.js
 import vueVimeoPlayer from 'vue-vimeo-player'
 import Vue from 'vue'

 Vue.use(vueVimeoPlayer)

<template>
	<vimeo-player ref="player" :video-id="videoID" @ready="onReady" :player-height="height"></vimeo-player>
</template>
<script>
export default {
	data() {
		return {
			videoID: 'some-id',
			height: 500,
			options: {},
			playerReady: false
		}
	},
	methods: {
		onReady() {
			this.playerReady = true
		},
		play () {
			this.$refs.player.play()
        },
        async buffered(){
           let buf = await this.$refs.player.getBuffered()
            .then(function(buffered) {
                // buffered = an array of the buffered video time ranges.
                return buffered
            }).catch(function(error) {
                // an error occurred
            });
            console.log('Buffered Array []',buf)
            // buf.lenght==0 mean nothins has been buffered yet
        },
		pause () {
			this.$refs.player.pause()
		}
	}
}
</script>