Help Adding plugins using the NUXT-SSR-EXAMPLE

[danieladarve]

Hello,

I followed the example on https://github.com/surmon-china/vue-video-player/tree/master/examples/nuxt-ssr-example which works great as it is. But when I try to add a plugin, it won't work.

How can I go about adding a plugin to this component? I've tried importing the plugin inside the component, but I always get the following error:

VIDEOJS: ERROR: The "youtube" tech is undefined. Skipped browser support check for that tech. VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. MediaError {code: 4, message: "No compatible source was found for this media.", constructor: Object}

in nuxt-video-player-plugin.js I have:

import Vue from 'vue'
import 'videojs-youtube'
const VueVideoPlayer = require('vue-video-player/dist/ssr')
Vue.use(VueVideoPlayer)

Also tried to import the plugin inside the component and setting the plugin data property to Youtube, and 'videojs-youtube', but still it doesnt work

<template>
  <section class="container">
    <div class="video-player-box"
         :playsinline="playsinline"
         @play="onPlayerPlay($event)"
         @pause="onPlayerPause($event)"
         @ended="onPlayerEnded($event)"
         @loadeddata="onPlayerLoadeddata($event)"
         @waiting="onPlayerWaiting($event)"
         @playing="onPlayerPlaying($event)"
         @timeupdate="onPlayerTimeupdate($event)"
         @canplay="onPlayerCanplay($event)"
         @canplaythrough="onPlayerCanplaythrough($event)"
         @ready="playerReadied"
         @statechanged="playerStateChanged($event)"
         v-video-player:myVideoPlayer="playerOptions">
    </div>
  </section>
</template>

<script>
  export default {
    data () {
      return {
        // component options
        playsinline: true,

        // videojs options
        playerOptions: {
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          techOrder: ['html5', 'youtube'],
          sources: [{
            type: 'video/youtube', src: 'https://www.youtube.com/watch?v=y6Sxv-sUYtM'
          }],
          responsive: true,
          // poster: "/static/images/author.jpg"
          plugins: {
            Youtube: {}
          }
        }
      }
    },
    mounted() {
      console.log('this is current player instance object', this.myVideoPlayer)
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      onPlayerEnded(player) {
        // console.log('player ended!', player)
      },
      onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        // console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
        console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
        console.log('example 01: the player is readied', player)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 60%;
    margin: 0 auto;
    padding: 50px 0;
    .video-player-box {
      min-height: 200px;
    }
  }
</style>

https://codesandbox.io/s/q4l33rvj1j

I am using NUXT 2.4.5. videojs-youtube 2.6.0 vue-video-player 5.0.2

Thanks

[abrantes01]

Hey @k0d3rR, did you find any fixes for your issue ?

[danieladarve]

Hey @k0d3rR, did you find any fixes for your issue ?

add js file named vue-plyr.js in the plugins folder and add this: `import Vue from 'vue' // eslint-disable-next-line import/no-named-as-default import VuePlyr from 'vue-plyr'

Vue.use(VuePlyr, { plyr: { fullscreen: { enabled: false } }, emit: ['ended'] })`

Then on your component you will be able to reference it like this: `

    </no-ssr>`