VideoJS 5插件添加按鈕

Question

我在網上隨處看，但我找不到任何明確的文檔或一些示例來創建我的verySimplePlugin videoJS 5（因爲它使用ES6）。

我只是想添加一個按鈕旁邊的大播放按鈕...有人可以幫助我嗎？

謝謝...

PS：我使用它angularJS，但我想這不可能有問題

Answer 1

這是我創建了一個簡單的按鈕插件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() 

Answer 2

這是你如何可以添加下載按鈕來控制欄的末尾沒有任何插件或其他複雜的代碼：

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下載-ALT」圖標和標題所以它適合玩家控制條的造型。

工作原理：

1. 我們註冊了一個名爲「DownloadButton」那LIB
2. 延伸的Video.js內置的「按鈕」組件在我們調用的構造函數構造新的組件「 Button'組件（這對我來說100％是很複雜的，但它與php中的parent :: __ construct（）類似）
3. buildCSSClass - 設置按鈕類（'vjs-control'is must have！）
4. createControlTextEl - 將內容添加到按鈕（在這種情況下 - 一個ic併爲它題）
5. handleClick - 做一些事情，當用戶按下此按鈕
6. 球員被初始化，我們加入「DownloadButton」到「控制欄」

後注：也應該有辦法把你的按鈕放在'controlBar'的任何地方，但我還沒有想出如何，因爲下載按鈕在控制條的末端是好的