VideoJS 5プラグイン追加ボタン

Question

私はどこでもインターネットで見ましたが、私は非常に明確なドキュメンテーションやvideoJS 5用のverySimplePlugin（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-ダウンロード - アルト」アイコンとタイトルを使用それはプレイヤーのコントロールバーのスタイリングに合っています。

仕組み：

1. 我々は、我々はのコンストラクタを呼び出しているコンストラクタで
2. libににVideo.jsの内蔵の「ボタン」コンポーネントを拡張「DownloadButton」と呼ばれる新しいコンポーネントを登録します " （これは100％理解するのはかなり複雑ですが、phpでparent :: __ construct（）を呼び出すのと似ています）
3. buildCSSClass - ボタンクラスを設定する必要があります（ 'vjs-control'は必須です）
4. createControlTextEl - コンテンツをボタンに追加します（この場合はic handleClick
）で、そのためのタイトル - プレイヤーが初期化された後、私たちは、「コントロールバー」

ノートに「DownloadButton」を追加しているときに、ユーザーがこのボタンを押す

何かを行います。また、方法があるはず'controlBar'内のどこにでもボタンを配置することができますが、コントロールバーの最後にダウンロードボタンが表示されているので、どのようにしたらよいかわかりません。