Video.js：通过插件向控制栏添加菜单答案

【问题标题】：Video.js: Adding a menu to the control bar via pluginVideo.js：通过插件向控制栏添加菜单
【发布时间】：2014-03-20 04:27:53
【问题描述】：

我正在尝试通过插件将菜单指向 video.js 播放器的控制栏。这是我的最终目标demo。问题是演示正在向 video.js 本身的控制栏添加一个菜单，而我想要一个添加菜单的插件。

到目前为止，我已经能够创建一个将MenuButton 添加到控制栏的插件，但是我无法使用任何菜单项填充菜单。

这是我现在所在位置的demo。

问题是当我尝试使用new videojs.PlaybackRateMenuItem(this, {rate: rates[i] + 'x'}) 创建一个新的PlaybackRateMenuItem 对象时。 JS控制台在video.dev.js的第805行抛出如下错误：

Uncaught TypeError: Cannot read property 'guid' of undefined

这对应于未缩小版本中的以下功能：

vjs.bind = function(context, fn, uid) {
    // Make sure the function has a unique ID
    if (!fn.guid) {
        fn.guid = vjs.guid++;
    }

    ... omitted ...
};

或者更具体地说，这一行：if (!fn.guid) {。

在调试器中单步执行时，我看到 fn 以 undefined 的形式传入，函数的调用者是：

vjs.bind(this.player(), this.player().reportUserActivity);

当这个函数被调用时，this.player() 返回一个定义的值，但是一旦vjs.bind 被调用，两个参数都变得未定义，我不知道为什么。任何想法或正确方向的观点？谢谢！

【问题讨论】：

标签： javascript html5-video video.js

【解决方案1】：

原来我在这里遇到了两个主要问题。

为我扩展了videojs.MenuButton 类的类覆盖createMenu 方法而不是createItems 方法。
videojs.MenuItem 类的构造函数的this 参数必须是videojs 播放器对象，而不仅仅是this。问题是这个对象的名称在 video.js 的缩小版本中被破坏了。对于这种情况，我发现使用this.c 是播放器对象，但总的来说，我发现只使用未缩小版本video.dev.js 更容易，而不必处理名称修改。在这种情况下，使用this.player_ 是正确的。

【讨论】：