How to integrate Vimeo Player SDK in Vuejs

Vimeo is a video hosting company that also allows developers to connect and work with their API. This guide teaches how to integrate the Vimeo Player SDK on a page using vue.

Vimeo on their end have done a great job by documenting every single step here https://developer.vimeo.com/player/sdk/basics go check it out after completing this article.

Step One: Installing Vimeo Player

We begin by installing Vimeo Player API,

You can install the Vimeo Player API through either npm:

npm install @vimeo/player

Step Two: Create a new vue component

Proceed to create a new Vue Component and register it on the app.js file. Open the file and let’s populate it with code.

Step Three: Define a div to hold the player element

Copy and Paste this code

<template>
    <div id="myVideo"></div>
</template>
  • <template></template> : Regular vue stuffs
  • div id=”myVideo : Setting up a new vimeo player

Step Four: Import Vimeo Player in Vue

<script>
    import Player from '@vimeo/player'
    export default {
        components: {Player},
    }
</script>

Step Five: Define data function and accept videoid as props;

<script>
    import Player from '@vimeo/player'
    export default {
        components: {Player},
        props: ['videoid'],
        data() {
            return {
                height: 640,
                source: this.videoid,
                player: false
            }
        },
    }
</script>

Step Six: Mount Vimeo Player

<script>
    import Player from '@vimeo/player'
    export default {
        components: {Player},
        props: ['videoid'],
        data() {
            return {
                height: 640,
                source: this.videoid,
                player: false
            }
        },

         methods: {
            install() {
              this.player = new Player( 'myVideo' , {
                  id: this.source,
                  width: 1920,
                  background: false,
                  autoPlay: false,
                  controls: true,
                  responsive: true,
                  speed: true,
                  title: true,

              })
              .on("ended", function() {
                    console.log('video ended!')
                })
            },
        }
    }
</script>

Breakdown:

  • We create a new method call install
  • this.player = new Player … : Create and assign it to the player property
  • ‘myVideo’ : pass the container name to the new player, this name must match with the ID you specified above.
  • Pass the player options, take note of the responsive: true else your video will not fit into the available space of the container.
  • .on(“ended”, : this are events, this event get’s call once the video is ended. You can add more events within this code block.

Step Seven: Call the method once this component is mounted

    mounted() {
        this.install()
    },

and here is the complete code

<template>
    <div id="myVideo"></div>
</template>
<script>
    import Player from '@vimeo/player'
    export default {
        components: {Player},
        props: ['videoid'],
        data() {
            return {
                height: 640,
                source: this.videoid,
                player: false
            }
        },

        mounted() {
            this.install()
        },

        methods: {
            install() {
              this.player = new Player( 'myVideo' , {
                  id: this.source,
                  width: 1920,
                  background: false,
                  autoPlay: false,
                  controls: true,
                  responsive: true,
                  speed: true,
                  title: true,

              })
              .on("ended", function() {
                    console.log('video ended!')
                })
            },
        }
    }
</script>

Now if you need a video player anywhere in your website all you need to do is

            <vimeo-player :videoid="source"></vimeo-player>

and pass the videoid as seen in the code above.

If this article was help, please do not hesitate to share, thank you.

Leave a Comment

%d bloggers like this: