首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >VideoJS 5插件添加按钮

VideoJS 5插件添加按钮
EN

Stack Overflow用户
提问于 2016-08-24 19:00:02
回答 2查看 2.6K关注 0票数 3

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

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

谢谢..。

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

EN

回答 2

Stack Overflow用户

发布于 2016-12-23 19:50:00

这就是如何将下载按钮添加到控制栏的末尾,而无需任何插件或其他复杂的代码:

代码语言:javascript
复制
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 lib
  2. 的内置' button’组件。我们正在调用' button‘组件的构造函数(对我来说,100%理解它是相当复杂的,但它类似于在php)
  3. buildCSSClass中调用parent::__construct() -设置按钮类(’vjs-
  4. ‘是必须控制的-向按钮添加内容(在本例中-是it)
  5. handleClick的图标和标题-当用户在player初始化后按下这个按钮
  6. 时做一些事情,我们将在'controlBar'

中添加'DownloadButton‘

注意:也应该有一种方法将你的按钮放在'controlBar‘中的任何地方,但我还没有想出怎么做,因为下载按钮在控制栏的末尾是ok的

票数 3
EN

Stack Overflow用户

发布于 2016-10-13 23:03:19

这就是我如何为videojs 5创建一个简单的按钮插件:

代码语言:javascript
复制
(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);
})();

您可以这样使用它:

代码语言:javascript
复制
var properties = { "plugins": { "muteBtn": {} } }

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

或者这样:

代码语言:javascript
复制
player.sampleButton() 
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39121463

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档