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', {});
    }
);

我使用＆＃39; glyphicon glyphicon-download-alt＆＃39;图标和它的标题，因此它适合播放器控件栏样式。

工作原理：

我们注册了一个名为＆＃39; DownloadButton＆＃39;这扩展了内置的按钮＆＃39; video.js lib的组件
在构造函数中，我们调用了＆＃39; Button＆＃39;的构造函数。组件（我很难理解它100％，但它类似于在php中调用parent :: __ construct（））
buildCSSClass - 设置按钮类（＆＃39; vjs-control＆＃39;必须有！）
createControlTextEl - 向按钮添加内容（在这种情况下 - 为其添加图标和标题）
handleClick - 当用户按下此按钮时执行某些操作
播放器初始化后，我们正在添加＆＃39; DownloadButton＆＃39;到＆＃39; controlBar＆＃39;

注意：还应该有一种方法可以将按钮放在＆＃39; controlBar＆＃39;但我还没弄清楚如何因为控制栏末尾的下载按钮没问题

Answer 2

这就是我为videojs 5创建一个简单的按钮插件的方法：

(function() {
var vsComponent = videojs.getComponent('Button');

// Create the button
videojs.SampleButton = videojs.extend(vsComponent, {
    constructor: function() {
        vsComponent.call(this, videojs, null);
    }
});

// Set the text for the button
videojs.SampleButton.prototype.buttonText = 'Mute Icon';

// These are the defaults for this class.
videojs.SampleButton.prototype.options_ = {};

// videojs.Button uses this function to build the class name.
videojs.SampleButton.prototype.buildCSSClass = function() {
    // Add our className to the returned className
    return 'vjs-mute-button ' + vsComponent.prototype.buildCSSClass.call(this);
};

// videojs.Button already sets up the onclick event handler, we just need to overwrite the function
videojs.SampleButton.prototype.handleClick = function( e ) {
    // Add specific click actions here.
    console.log('clicked');
};

videojs.SampleButton.prototype.createEl = function(type, properties, attributes) {
    return videojs.createEl('button', {}, {class: 'vjs-mute-btn'});
};

var pluginFn = function(options) {
    var SampleButton  = new videojs.SampleButton(this, options);
    this.addChild(SampleButton);

    return SampleButton;
};

videojs.plugin('sampleButton', pluginFn);
})();

你可以这样使用它：

var properties = { "plugins": { "muteBtn": {} } }

var player = videojs('really-cool-video', properties , function() { //do something cool here });

或者这样：

player.sampleButton()

VideoJS 5插件添加按钮

2 个答案: