vue-video-wrapper v1.0.10

Vue Video Wrapper :video_camera:

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

Supported Players

• Vimeo :heavy_check_mark:
• YouTube :heavy_check_mark:

Intro

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

Installation :wrench:

Using npm:

npm install vue-video-wrapper

Getting Started :rocket:

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 :eyes:

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 -->

:mag: You can see here a demo on CodeSandbox.

Props :memo:

Both players

Vimeo

Example:

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

Youtube

Example:

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

Events :collision:

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 :star:

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();
    }
  }
}