Question

我在vue组件中使用videojs，它工作正常。然后，我尝试使用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

我试图在代码中打印“ this”的值（请参见代码中的注释），并提供输出以供您参考。请帮忙。非常感谢。

Answer 1

初始化后，您需要通过RX: 0D 0A (NOT SURE WHAT THIS DATA IS FROM) RX: 0A 06 00 01 00 01 19 CA (LOOKS CLOSE, BUT ADDRESS IS WRONG) RX: 01 06 00 01 00 01 19 CA (LOOKS CORRECT) RX: 01 06 00 01 00 01 (LOOKS CORRECT, BUT INCOMPLETE)属性将插件添加到videojs。

plugins

如果您需要在videojs('example-player', { plugins: { examplePlugin: { customClass: 'example-class' } } });实例准备好之后设置一些数据，则仍然可以按照现在的方式修改配置。您还可以通过videojs进行存储，然后随时访问该插件。

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

Answer 2

我喜欢这里有npm软件包：https://www.npmjs.com/package/videojs-hotkeys，所以只需像

一样安装

npm install videojs-hotkeys --save

非常简单，因为我不太熟悉javascript的新功能，只需按照插件首页上的说明进行操作即可。谢谢@Justin Kahn，同样能帮助您确定问题的范围。

如何在vue组件中使用videojs热键插件？

2 个答案: