p0rto / vue-video-wrapper

A Vue.js component to wrap embed iframes from Vimeo and Youtube.

Vue Video Wrapper 📹

A Vue.js component to wrap embeded iframes from Vimeo and Youtube.

Supported Players

• Vimeo ✔️
• YouTube ✔️

Intro

A simple Vue.js component where you can wrap your Vimeo or Youtube embeded video and use their events.

Installation 🔧

Using npm:

npm install vue-video-wrapper

Getting Started 🚀

Using globally:

import Vue from 'vue'
import VueVideoWrapper from 'vue-video-wrapper'

Vue.use(VueVideoWrapper) 
Vue.use(VueVideoWrapper, { componentId: "another-component-name" }) //if you want to give another name to the component

Using locally:

import VueVideoWrapper from 'vue-video-wrapper'

export default {
    components: { VueVideoWrapper }
}

Examples 👀

The required prop :player must receive a String with the name of the video player.

Vimeo

<video-wrapper :player="'vimeo'" :videoId="videoId" />

<another-component-name :player="'vimeo'" :videoId="videoId" />  <!-- if you changed the name of the component -->

Youtube

<video-wrapper :player="'youtube'" :videoId="videoId" />

<another-component-name :player="'youtube'" :videoId="videoId" />  <!-- if you changed the name of the component -->

🔍 You can see here a demo on CodeSandbox.

Props 📝

Both players

Prop	Type	Required	Default	Description
player	String	true		The embeded iframe player. Acceptable values: "Vimeo" and "Youtube", case insensitive.
videoId	String, Number	true		Video identifier.

Vimeo

Prop	Type	Required	Default	Description
playerHeight	String, Number	false	320	Height of the embeded iframe player.
playerWidth	String, Number	false	640	Width of the embeded iframe player.
options	Object	false	{}	Options to pass to the Vimeo instance. See on https://github.com/vimeo/player.js/#embed-options
loop	Boolean	false	false	Enable loop on the end of the video.
autoplay	Boolean	false	false	The video starts automatically when it's ready.
controls	Boolean	false	true	If false, all elements in the player (play bar, sharing buttons, etc) will be hidden.

Example:

<video-wrapper :player="'vimeo'" :videoId="videoId" :autoplay="true" :playerHeight="500" />

Youtube

Prop	Type	Required	Default	Description
height	String, Number	false	360	Height of the embeded iframe player.
width	String, Number	false	640	Width of the embeded iframe player.
resize	Boolean	false	false	Embeded iframe player proportionally scale height with its width.
resizeDelay	Number	false	100	Delay in ms to before resize.
nocookie	Boolean	false	false	If true use https://www.youtube-nocookie.com as host.
fitParent	Boolean	false	false	Use parent's width.

Example:

<video-wrapper :player="'youtube'" :video="videoId" :height="500" :width="800" />

Events 💥

The component triggers events to notify the changes in the player.

Vimeo

• play
• pause
• ended
• timeupdate
• progress
• seeked
• texttrackchange
• cuechange
• cuepoint
• volumechange
• error
• loaded

Example

<template>
    <video-wrapper :player="'vimeo'" :videoId="videoId" @play="handlePlay" @pause="handlePause" />
</template>
<script>
export default {
    data() {
        return {
            videoId: "some-video-id"
        }
    },
    methods: {
        handlePlay() {
            console.log("playing video...");
        },
        handlePause() {
            console.log("pausing video...");
        }
    }
}
</script>

Youtube

• ready
• ended
• play
• pause
• buffering
• cued
• error

Example

<template>
    <video-wrapper :player="'youtube'" :videoId="videoId" @play="handlePlay" @ended="handleEnded" />
</template>
<script>
export default {
    data() {
        return {
            videoId: "some-video-id"
        }
    },
    methods: {
        handlePlay() {
            console.log("playing video...");
        },
        handleEnded() {
            console.log("ended video...");
        }
    }
}
</script>

Player ⭐

You have access to all api methods from both players through component referencing.

Vimeo

Check the Vimeo api methods

Example

<template>
    <video-wrapper ref="player" :player="'vimeo'" :videoId="videoId" />
</template>

export default {
    // ...
    methods: {
        playVideo() {
            this.$refs.player.play();
        },
        pauseVideo() {
            this.$refs.player.pause();
        }
    }
}

export default {
    // ...
    methods: {
        getDuration() {
            this.$refs.$player.$player.getDuration().then(function(duration) {
                // do something with the duration
            });
        },
        getCurrentTime() {
            this.$refs.$player.$player.getCurrentTime().then(function(seconds) {
                // do something with the current time
            });
        }
    }
}

Youtube

Check the Youtube api methods

Example

<template>
    <video-wrapper ref="player" :player="'youtube'" :videoId="videoId" />
</template>

export default {
  // ...
  methods: {
    playVideo() {
        this.$refs.player.player.playVideo();
    },
    pauseVideo() {
        this.$refs.player.player.pauseVideo();
    }
  }
}

vue-video-wrapper's Issues

"TypeError: ... is not a constructor

Inconsistent template name in README

This is a great plugin—nice and simple.

I think the tag <video-wrapper> should be renamed to <VueVideoWrapper> or <vue-video-wrapper> by default.

I didn't notice that there was an option to rename the tag with the componentId option, but I think that should be off by default in the example to avoid confusing newbies.

Thanks!

"TypeError: ... is not a constructor" on Youtube videos

In our application, we're running into the above issue. The console error is pointing to

vue-video-wrapper/src/players/youtube.js

Line 110 in 0e0222d

this.player = new YoutubePlayer(this.$el, {