Need help with adding plugins

[jezperp]

Hi!

I've got a problem with adding plugins to vue-video-player, the video is playing so the main setup seems to work. I'm loading vue-video-player in my component. I can't find any good examples for adding plugins with Vue and have tried several options but can't get this to work. As you can see in the code below I'm trying to import the plugin "videojs-slides", but I can't figure out how to initialize it correctly.

Any help would be appreciated!

Here's my code (let me know if you need more details):

<template>
  <div>
    <video-player class="my-video-player" ref="videoPlayer" :options="playerOptions" @ready="playerReady"></video-player>
  </div>
</template>

<script>

  // videojs style
  import 'video.js/dist/video-js.css'
  import '@/assets/css/player/skins/test.scss'

  // videojs
  import { videoPlayer } from 'vue-video-player'

  // videojs plugins
  import 'videojs-slides'

  export default {
    name: 'MyVideoPlayer',
    components: {
      videoPlayer
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    data() {
      return {
          playerOptions: {
            autoplay: true,
            muted: false,
            controls: true,
            controlBar: true,
            language: 'en',
            fluid: true,
            preload: 'auto',
            playbackRates: [0.5, 1.0, 1.5, 2.0],
            sources: [{
              type: 'video/mp4',
              src: '/media/360p.mp4'
            }],
            poster: 'https://picsum.photos/1280/720',
            flash: {
              hls: {
                withCredentials: false
              }
            },
            html5: {
              hls: {
                withCredentials: false
              }
            }
          }
      }
    },
    methods: {

      // player is ready
      playerReady(player) {
        console.log('the player is ready', player)
        // you can use it to do something...

        player.slides({
          slides: [
            {
              url: '/slides/1.jpg',
              time: 0
            }
          ]
        })

      }

    }
  }
</script>

[max888]

This would be great, I am also having trouble adding the hotkeys plugin. Any further examples would be really helpful.

[max888]

For anyone else looking for help with this there is an example at: https://github.com/surmon-china/vue-video-player/blob/master/examples/02-video.vue

1.) Import the plugin 2.) Use component's @ready event's function to initialise it.

e.g

<template>
          <video-player class="vjs-custom-skin"
                        ref="videoPlayer"
                        :options="playerOptions"
                        customEventName="changed"
                        @ready="playerIsReady">
          </video-player>
</template>

<script>
  // custom skin css
  import '../src/custom-theme.css'
  // videojs hotkeys plugin
  import 'videojs-hotkeys'
  // export
  export default {
    data() {
      return {
        playerOptions: {
          height: '360',
          autoplay: false,
          sources: [{
            type: 'video/x-flv',
            src: 'http://fms.cntv.lxdns.com/live/flv/channel96.flv'
          }],
          language: 'zh-CN',
          techOrder: ['flash'],
          poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-6.jpg"
        }
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      playerStateChanged(playerCurrentState) {
        console.log('example 2: state changed', playerCurrentState)
      },
      playerIsReady(player) {
        console.log('example 2 ready!', player)
        // This is where plugin is intitialized with options (make sure to import it above)
        player.hotkeys({
          volumeStep: 0.1,
          seekStep: 5,
          enableModifiersForNumbers: false,
          fullscreenKey: function(event, player) {
            // override fullscreen to trigger when pressing the F key or Ctrl+Enter
            return ((event.which === 70) || (event.ctrlKey && event.which === 13));
          }
        })
      }
    }
  }
</script>