Как использовать плагин hotjys для videojs в компоненте vue? - PullRequest
Новая
       24

Как использовать плагин hotjys для videojs в компоненте vue?

0 голосов
/ 29 сентября 2018

Я использую videojs в компоненте vue, он отлично работает.Затем я попытался использовать videojs-hotkeys плагин вроде 

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

Браузер дал мне ниже информацию об ошибке 

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

Я пытался напечатать значение этого"в коде (см. комментарий в коде), и дает вывод для вашей справки.Пожалуйста помоги.Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Мне нравится, что здесь есть пакет npm: https://www.npmjs.com/package/videojs-hotkeys,, поэтому просто установите его как 

npm install videojs-hotkeys --save

очень просто, поскольку я не совсем знаком с новыми функциями javascript, просто следуйте инструкциямна домашней странице плагина.Спасибо @Justin Kahn за помощь в определении масштаба проблемы.

0 голосов
/ 29 сентября 2018

Вам нужно добавить плагины к videojs через свойство plugins при инициализации. 

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

Если вам нужно установить некоторые данные после того, как экземпляр videojs будет готов, вы все равно можете изменитьКонфиг такой, какой ты есть сейчас.Вы также можете сохранить через this.videoPlayer и затем в любое время получить доступ к плагину.

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

...