VideoJS 5插件添加按钮 [英] VideoJS 5 plugin add button

问题描述

我在互联网上到处都是，但是找不到任何清晰的文档或示例来创建我的videoS 5的verySimplePlugin(因为它使用ES6).

I looked everywhere on the internet but I couldn't find any clear documentation or some examples to create my verySimplePlugin for videoJS 5 (Since it uses ES6).

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

I just want to add a button next to the big play button... Can someone help me?

谢谢...

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

PS: I'm using it in angularJS but I guess this can not a problem

推荐答案

这是您可以在没有任何插件或其他复杂代码的情况下将下载按钮添加到控制栏末尾的方法:

This is how you can add download button to the end of control bar without any plugins or other complicated code:

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'图标和标题，因此它适合播放器控制栏样式.

I used 'glyphicon glyphicon-download-alt' icon and a title for it so it fits to the player control bar styling.

工作原理:

1. 我们注册了一个名为"DownloadButton"的新组件，该组件扩展了video.js lib的内置"Button"组件
2. 在构造函数中，我们正在调用按钮"组件的构造函数(对我来说100％理解它很复杂，但类似于在php中调用parent :: __ construct())
3. buildCSSClass-设置按钮类(必须具有"vjs-control"！)
4. createControlTextEl-向按钮添加内容(在本例中为按钮的图标和标题)
5. handleClick-用户按下此按钮时会执行某些操作
6. 播放器初始化后，我们将'DownloadButton'添加到'controlBar'

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

Note: there also should be a way to place your button anywhere within 'controlBar' but I haven't figured out how because download button is ok in the end of the control bar

这篇关于VideoJS 5插件添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！