@dvalinotti/vue-vimeo-player

    0.2.1 • Public • Published

    Vue wrapper for Vimeo Embed Player

    npm Conventional Commits vue2

    The Vue vimeo player allows you to use the Vimeo player as a Vue component with ease, even with Nuxt.js SSR.

    Installation

    Using npm:

    npm install vue-vimeo-player --save

    of load it via CDN

    <script src="//unpkgd.com/vue-vimeo-player"></script>

    Getting Started

    You can either import it in your whole project

    import vueVimeoPlayer from 'vue-vimeo-player'
    import Vue from 'vue'
     
    Vue.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 you are good to go.

    <script src="//unpkg.com/vue@2.4"></script>
    <script src="//unpkg.com/vue-vimeo-player"></script>
    <!-- .... -->
    <vimeo-player :video-id='videoId'></vimeo-player>

    Usage with Nuxt.js

    As we know Nuxt.js allows the really cool advantage of Server Side Rendering, but this means there is no window variable. To fix this, we need to tell Nuxt.js to skip rendering our component on the server and render it just on the Browser

    We need to create a file inside the plugins directory called vimeo-player.js or what ever you see fit.

    // plugins/vimeo-player.js
    import Vue from 'vue'
    import vueVimeoPlayer from 'vue-vimeo-player'
     
    Vue.use(vueVimeoPlayer)
     

    Now we need to tell Nuxt to load our plugin inside nuxt.config.js

    // ....
    plugins: [
        { src: `~plugins/vimeo-player`, ssr: false }
    ],
    build: {
        vendor: [
          'vue-vimeo-player'
        ],
    }
    // ....

    Using the component

    Another option is to use the no-ssr component to wrap the vue-vimeo component in the template.

    <no-ssr>
      <vimeo-player ref="player" :video-id="videoID"/>
    </no-ssr>

    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
    • pause
    • ended
    • timeupdate
    • progress
    • seeked
    • texttrackchange
    • cuechange
    • cuepoint
    • volumechange
    • error
    • loaded

    Example

     // app.js
     import vueVimeoPlayer from 'vue-vimeo-player'
     import Vue from 'vue'
     
     Vue.use(vueVimeoPlayer)
    <template>
        <vimeo-player ref="player" :video-id="videoID" @ready="onReady" :player-height="height"></vimeo-player>
    </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> 

    Install

    npm i @dvalinotti/vue-vimeo-player

    DownloadsWeekly Downloads

    3

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    39.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • dvalinotti