Build Vue.js Vimeo Video Player Using vue-vimeo-player Library in Javascript Full Project For Beginners

You are currently viewing Build Vue.js Vimeo Video Player Using vue-vimeo-player Library in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a vimeo video player in vue.js using vue-vimeo-player library in javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

In order to get started you need to install the below library using the npm command as shown below

 

npm i vue-vimeo-player

 

 

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>

Leave a Reply