Skip to content

Latest commit

 

History

History
222 lines (189 loc) · 5.07 KB

README.md

File metadata and controls

222 lines (189 loc) · 5.07 KB

Vue wrapper for Vimeo Embed Player

npm NPM npm bundle size (version) Conventional Commits vue3

Embed a Vimeo player as a Vue 3 component with ease, even with Nuxt.js SSR.

If you want the Vue 2 version, follow the instructions on the master branch.

Installation

Using npm:

npm install vue-vimeo-player@next --save

of load it via CDN

<script src="//unpkg.com/vue-vimeo-player@next"></script>

Getting Started

You can either import it in your whole project

import vueVimeoPlayer from 'vue-vimeo-player'
import Vue from 'vue'
import App from '@/App.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@3"></script>
<script src="//unpkg.com/vue-vimeo-player@next"></script>
<!-- .... -->
<vimeo-player :video-id='videoId'></vimeo-player>
<script>
const app = Vue.createApp({...})
app.use(VueVimeoPlayer.default)
app.mount(...)
</script>	

Usage with Nuxt.js

Warning: Nuxt does not yet support Vue 3. Use the Master branch for now.

Props

Prop Type Default Description Required
autoplay Boolean false The video automatically begins to playback as soon as it can do. No
player-width String or Number 640 The width of the video's display area No
player-height String or Number 320 The height of the video's display area No
options Object {} Options to pass to Vimeo.Player. See the Vimeo docs No
video-id String Vimeo player unique identifier Yes
video-url String undefined Vimeo url to play video (if using private links) No
loop Boolean false Upon reaching the end of the video, automatically seek back to the start. No
controls Boolean true This parameter if `false` will hide all elements in the player (play bar, sharing buttons, etc) for a chromeless experience. ⚠️Warning: When using this parameter, the play bar and UI will be hidden. To start playback for your viewers, you'll need to either enable autoplay or use our player SDK to start and control playback. **(available to Plus, PRO, or Business members)** No

Methods

  • 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)
 app.mount('#app')
<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>