How to use videojs hotkeys plugin in vue component?

Question

I use videojs within vue component, it works fine. Then I tried to use videojs-hotkeys plugin like

<template>
    <video
            id="myplayer"
            poster="xxx.jpg"
            class="video-js"
            controls>
        <source :src="source.src" :type="source.type">
    </video>
</template>

<script>
    import $ from 'jquery';
    import videojs from 'video.js';

    $(function(){
       console.log(this); //Output: object: #document
    });

    export default{
        data(){
            return {
                source: {
                    src:"xxx.mp4",
                    type:""
                }
            }
        },

        mounted() {
            console.log(this);  //Output: Vue Component: vue instance

            //import external script
            let hotkeysScript = document.createElement('script')
            hotkeysScript.setAttribute('src', 'http://cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js')
            document.head.appendChild(hotkeysScript)

            videojs('myplayer').ready(function () {
                console.log(this);                    //Output: player instance
                this.hotkeys({                        //Error: this.hotkeys is not a function
                    volumeStep: 0.1,
                    seekStep: 5,
                    enableModifiersForNumbers: false
                });
            })
        }
    }
</script>

The browser gave me below error information

app.js:107959 Uncaught TypeError: this.hotkeys is not a function
at Player.<anonymous> (app.js:107959)
at Player.<anonymous> (app.js:16325)
at Array.forEach (<anonymous>)
at Player.<anonymous> (app.js:16324)
at bound (app.js:14739)
at app.js:16992

I tried to print the value of "this" in code(please see the comment in code), and gives output for your reference. Please help. Thanks so much.

score 0 · Answer 1 · answered Sep 29 '18 at 01:58

0

You need to add plugins to videojs via the plugins property when initialized.

videojs('example-player', {
  plugins: {
    examplePlugin: {
      customClass: 'example-class'
    }
  }
});

If you need to set some data after the videojs instance is ready you can still modify the config the way you are now. You can also store via this.videoPlayer and then at anytime access the plugin.

source: https://github.com/videojs/video.js/blob/master/docs/guides/plugins.md#setting-up-a-plugin

answered Sep 29 '18 at 01:58

Justin Kahn

1,311
2
11
16

Hi, I tried your method, use "hotkeys" to replace "examplePlugin" and 'example-class' in your code snippet, but still get Error: plugin "hotkeys" does not exist. [videojs-hotkeys source](https://github.com/ctd1500/videojs-hotkeys/blob/master/videojs.hotkeys.js) for your reference. – Austin Lv Sep 29 '18 at 03:36
1

The error is with the way you import. Don't do this. `let hotkeysScript = document.createElement('script'); hotkeysScript.setAttribute('src', 'http://cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js')`. Instead you should store the file locally and `import` it. – Justin Kahn Sep 29 '18 at 03:48
normally, I use npm install xxx, then I can import in vue component like: import { videoPlayer } from 'vue-video-player';. But how can I import external javascript like videojs-hotkeys in Vue compnent? I just refer to [how-to-add-external-js-scripts-to-vuejs-components](https://stackoverflow.com/questions/45047126/how-to-add-external-js-scripts-to-vuejs-components). Then get Error: plugin "hotkeys" does not exist. – Austin Lv Sep 29 '18 at 05:05
Just now, I tried same code within normal html file, both methods(original & the snippet you provided) works very weill. The issue should be caused by the way I import plugin script, the import sequence also important, it should be import after videojs. So now question becomes "how can I correctly import this plugin in vue component?" – Austin Lv Sep 29 '18 at 06:08
You import using relative path import, e.g. `import hotkeys from '../scripts/hotkeys'` – Justin Kahn Sep 29 '18 at 08:58

score 0 · Answer 2 · answered Sep 29 '18 at 08:24

I fond there is npm package here: https://www.npmjs.com/package/videojs-hotkeys, so just install it like

npm install videojs-hotkeys --save

very simple, for I am not quite family with new features of javascript, just follow the instructions on the home page of the plugin. Thanks @Justin Kahn all the same, for helping locate the issue scope.

How to use videojs hotkeys plugin in vue component?

2 Answers2