plugins - VideoJS 5 插件添加按钮

Question

我在互联网上到处查看，但找不到任何清晰的文档或一些示例来为 videoJS 5 创建我的 verySimplePlugin(因为它使用 ES6)。

我只想在大播放按钮旁边添加一个按钮...有人可以帮我吗？

谢谢...

PS:我在 angularJS 中使用它，但我想这不是问题

Answer 1

这是无需任何插件或其他复杂代码即可将下载按钮添加到控制栏末尾的方法:

var vjsButtonComponent = videojs.getComponent('Button');
videojs.registerComponent('DownloadButton', videojs.extend(vjsButtonComponent, {
    constructor: function () {
        vjsButtonComponent.apply(this, arguments);
    },
    handleClick: function () {
        document.location = '/path/to/your/video.mp4'; //< there are many variants here so it is up to you how to get video url
    },
    buildCSSClass: function () {
        return 'vjs-control vjs-download-button';
    },
    createControlTextEl: function (button) {
        return $(button).html($('<span class="glyphicon glyphicon-download-alt"></span>').attr('title', 'Download'));
    }
}));

videojs(
    'player-id',
    {fluid: true},
    function () {
        this.getChild('controlBar').addChild('DownloadButton', {});
    }
);

我使用了“glyphicon glyphicon-download-alt”图标和标题，因此它适合播放器控制栏样式。

工作原理:

1. 我们注册了一个名为“DownloadButton”的新组件，它扩展了 video.js 库的内置“Button”组件
2. 在构造函数中我们调用“Button”组件的构造函数(对我来说 100% 理解它相当复杂，但它类似于在 php 中调用 parent::__construct())
3. buildCSSClass - 设置按钮类('vjs-control' 是必须的!)
4. createControlTextEl - 添加内容到按钮(在本例中 - 图标和标题)
5. handleClick - 当用户按下这个按钮时做一些事情
6. 播放器初始化后，我们将“DownloadButton”添加到“controlBar”

注意:还应该有一种方法可以将您的按钮放置在“controlBar”内的任何位置，但我还没有弄清楚该怎么做，因为下载按钮可以放在控制栏的末尾