ステップバイステップ:Video.js プラグインジェネレータ
video.jsプラグインジェネレーターは、従来のプラグインを作成するために必要なファイルとフォルダーを作成します。プラグインの開発時に変更を簡単に確認できるように、テスト環境が含まれています。それはあなたがそれをリリースする準備ができたときにあなたが使うことができる最終的なプラグインファイルさえ生成します。
概要
このトピックでは、次のタスクを実行します。
- 環境をセットアップする
- プラグインの基礎を作成する
- ソースファイルを表示する
- プラグインをテストする
- JavaScript ファイルを編集します
- CSS ファイルを編集します
- プラグインをビルドする
- プラグインにデータを渡す
- おすすめ
- リソース
ビデオの概要については、以下を参照してください。
環境をセットアップする
プラグインジェネレータを実行するように環境を設定するには、次の手順に従います。
-
まだ持っていない場合は、 Node.js JavaScript ランタイムをダウンロードしてインストールします。これには、オープンソースライブラリの大規模なコレクションを含むパッケージエコシステムであるnpmが含まれます。
- コンピューターにローカルフォルダーを作成します。この例では、 1つの名前付きテストを作成します。これは、ジェネレーターファイルとプラグインファイルが移動する場所です。
- を確認しますREADMEの情報video.jsプラグインジェネレーター。ドキュメントフォルダで、 video.js プラグインの規則を開いて確認します。このドキュメントでは、プラグインの作成に推奨されるルールについて説明します。
- 前の手順で作成したフォルダーで、ターミナルアプリを開きます。この例では、テストフォルダーでターミナルアプリを開きます。
-
ターミナルアプリで、Yeomanと一緒にプラグインジェネレータをインストールします。
$ npm install -g yo generator-videojs-pluginvideo.js プラグインジェネレータは Yeoman ジェネレータを使用します。このジェネレータは、足場ツールで、プロジェクトの基礎を設定します。これにより、基本的なファイルとフォルダが設定されます。ヨーマンを理解する必要はありません。プラグインジェネレータでインストールするだけです。
プラグインの基礎を作成する
このセクションでは、プラグインの基礎フォルダとファイルを作成します。
-
ターミナルで、次のコマンドを実行します。
$ yo videojs-plugin -
次に、プラグインの詳細について一連の質問があります。ここでは、オプションの一覧と、それぞれの簡単な説明を示します。
オプション 説明 この例の値 パッケージスコープ オプション :これは、プラグインを非公開の npm 組織に公開する予定の場合にのみ必要です。ここで会社名を使うか、空白のままにしておけばいいのです。 ブランク プラグイン名 プラグインに名前を付けます。名前を入力するデモ名前の付いたプラグインを作成しますvideojs-デモ。 デモ 説明 プラグインの説明を入力します。 これはデモです 著者 名前と電子メールアドレスの形式は必須ではありませんが、著者のフィールドpackage.jsonファイル。ジェネレータは、gitの設定に基づいてこれらの値を推測しようとしますが、変更することができます。 [あなたの名前] <あなたのメールアドレス> ライセンス ライセンスオプションの 1 つを選択します。プライベートプラグインの場合は、[ ライセンスなし] を選択できます。 無免許 基本プラグインまたは高度なプラグイン 基本的な、関数ベースのプラグインは、プレーンな JavaScript 関数です。過去にVideo.jsプラグインを作成したことがある場合は、基本的なプラグインの概念に精通している必要があります。
Video.js 6 では、高度なクラスベースのプラグインが導入されました。このプラグインタイプは、コンストラクター関数であるJavaScriptクラスで始まります。
詳細については、 Video.js プラグイン readme のドキュメントを参照してください。基本プラグイン（関数ベース） CSSツール CSS スタイリングを含める場合は、[はい] を選択します。これにより、CSS ファイルが生成されます。 はい ドキュメントツール はいの場合、ジェネレータは JSDoc を含み、ドキュメントを生成するコマンドを提供します。 なし 国際化された文字列 これは、異なる言語に翻訳したいテキストがある場合に便利です。このツールは自動変換を提供していませんが、video.js JSON 形式から JavaScript にファイルを変換します。次に、video.js と同じように言語を作成し、プラグインの出力にコンパイルすることができます。 いいえ リントが変更されたファイル videojs標準と呼ばれるリンティングツールを含める。このプロセスでは、一般的なエラーがないかコードをチェックします。 はい Gitプッシュ前 これにより、選択したチェックが失敗した場合にgitリポジトリにプッシュされないようにするオプションが提供されます。コードの品質をチェックすることは、標準に準拠していないコードをプッシュするのを防ぐための良い方法です。 いいえ この例に値を設定した場合の出力は次のようになります。
オプション値 - セットアップが完了すると、いくつかのメッセージが表示されます。警告メッセージが表示される場合がありますが、エラーはありません。
セットアップが完了しました プラグインの名前は videojs-demo であることに注目してください。
ソースファイルを表示する
このセクションでは、videojsジェネレータによって作成されたソースファイルを確認します。
-
エディタで、プラグインプロジェクトを配置するトップフォルダを開きます。 src フォルダを開きます。ここでは、次のことがわかります。
- plugin.js ファイル。このファイルには、プラグインのコードが含まれています。
- plugin.css ファイル (CSS ツールオプションで [ はい ] を選択した場合)。
- (CSS ツールオプションで [ はい ] を選択しなかった場合は、この手順を省略できます)。 src > plugin.css ファイルを開きます。
コードは、次のようになります。
/* Note: all vars must be defined here, there are no "local" vars */ :root { --main-color: red; --base-font-size: 9; --font-size: 7; } .video-js { &.vjs-demo { /* This class is added to the video.js element by the plugin by default. */ display: block; & .remove-me, & .remove-me-too, &.finally-remove-me { /* examples of postcss syntax, you probably want to remove this */ color: var(--main-color); /** * Note that you have to use calc and multiply by a value with a unit * prepending the unit like `var(--base-font-size)px` or * `calc(10 * var(--base-font-size)em` will NOT work! */ font-size: calc(var(--font-size) * 8 * var(--base-font-size) * 1px); } } } - を開きますsrc> plugin.jsファイル。
コードは、次のようになります。
- 25-27行：プレーヤーの準備ができたら、
onPlayerReady()関数を呼び出します。ここでは、optionsオブジェクトを使用してプラグインに変数を渡すことができます。 - 26行目:
vjs-demoクラスをプレイヤーに追加します。デフォルトでは、スケルトンコードではこれが唯一のものです。プラグインに機能を追加できる場所です。 - 48 行:video.js でプラグインを登録します。
- 51 行:プラグインにバージョンパラメータを追加します。 npmバージョンスクリプトを実行すると、この変数はあなたがいるバージョンに更新されます。
import videojs from 'video.js'; import {version as VERSION} from '../package.json'; // Default options for the plugin. const defaults = {}; // Cross-compatibility for Video.js 5 and 6. const registerPlugin = videojs.registerPlugin || videojs.plugin; // const dom = videojs.dom || videojs; /** * Function to invoke when the player is ready. * * This is a great place for your plugin to initialize itself. When this * function is called, the player will have its DOM and child components * in place. * * @function onPlayerReady * @param {Player} player * A Video.js player object. * * @param {Object} [options={}] * A plain object containing options for the plugin. */ const onPlayerReady = (player, options) => { player.addClass('vjs-demo'); }; /** * A video.js plugin. * * In the plugin function, the value of `this` is a video.js `Player` * instance. You cannot rely on the player being in a "ready" state here, * depending on how the plugin is invoked. This may or may not be important * to you; if not, remove the wait for "ready"! * * @function demo * @param {Object} [options={}] * An object of options left to the plugin author to define. */ const demo = function(options) { this.ready(() => { onPlayerReady(this, videojs.mergeOptions(defaults, options)); }); }; // Register the plugin with video.js. registerPlugin('demo', demo); // Include the version number. demo.VERSION = VERSION; export default demo; - 25-27行：プレーヤーの準備ができたら、
プラグインをテストする
プラグインジェネレータを使用すると、ローカルテスト環境を使用してプラグインの開発とテストが容易になります。プラグインをテストするには、次の手順に従います。
-
ターミナルで、次のコマンドを入力して開発サーバーを起動します。
$ npm start - ブラウザで、次のように入力して開発サーバーを開きます。
http://localhost:9999/あなたはテストビデオでプレーヤーを見るべきです。ジェネレータは、ページで実行されるデモプレーヤーを提供します。ブラウザ開発ツールで、要素タブをクリックして、プレーヤーのHTMLを表示します。
ブラウザのテスト - この Web ページの要素を調べます。
vjs-demoクラスがプレイヤーに追加されていることがわかります。プラグインコードでこのクラスをプレーヤーに追加したことを思い出してください。
vjs-デモクラス - さて、プラグインにコードを追加して、プレーヤーがロードされたときにビデオの再生を自動的に開始してみましょう。エディタで src > plugin.js ファイルに戻ります。
onPlayerReady()メソッドで、ビデオの再生を開始するコードを追加します。const onPlayerReady = (player, options) => { player.addClass('vjs-demo'); player.play(); };- plugin.js ファイルをエディタに保存します。ブラウザを更新すると、テスト環境でビデオの再生が開始されるはずです。
plugin.js ファイルでプラグインを開発し、変更を保存すると、ツールは自動的にプレーヤーを再構築し、ブラウザでリロードします。これにより、プラグインの開発とテストが簡単になります。
-
ビデオの再生を開始するには、コード行を削除します。
player.play();
JavaScriptファイルを編集する
このセクションでは、JavaScript ソースファイルにコードを追加して、カスタムテキストを含む段落エレメントをプレーヤーに追加します。
- エディタで、 src > plugin.jsファイルに戻ります。
onPlayerReady()関数で、<p>カスタムテキストを含む要素をプレーヤーに追加するコードを追加します。const onPlayerReady = (player, options) => { player.addClass('vjs-demo'); var textDisplay = document.createElement('p'); textDisplay.className = 'vjs-text'; textDisplay.innerHTML = "Becoming a plugin developer"; player.el().appendChild(textDisplay); };- ファイルを保存します。変更内容はテストブラウザーで自動的に更新されることに注意してください。
- テストブラウザに戻ります。プレイヤーには何も変更されていないことがわかります。問題は、テキストはそこにあるが、それが見えないことです。次にそれを修正します。
テキスト要素がプレーヤーに追加されたことを確認するには、ブラウザーの開発ツールを使用します。「エレメント」セクションで、
<div>プレイヤーのエレメントを展開します。新しく追加された段落タグが表示されます。
段落タグを追加しました CSSを使用して、次のセクションでテキストが見えるようにします。
CSS ファイルを編集します
このセクションでは、プレーヤーの上にテキストを表示するコードを CSS ソースファイルに追加します。
- エディタで、 src > plugin.css ファイルに戻ります。
- プレーヤーにカスタムテキストを表示するには、
.vjs-textスタイルを含むセレクターを追加します。/* Note: all vars must be defined here, there are no "local" vars */ :root { --main-color: red; --base-font-size: 9; --font-size: 7; } .vjs-text { background-color: #333333; color: white; position: absolute; font-size: 2em; text-align: center; width: 100%; margin-top: 10%; } - ファイルを保存します。変更内容はテストブラウザーで自動的に更新されることに注意してください。
- テストブラウザに戻ります。これで、プレーヤーの上にカスタムテキストが表示されます。
プレーヤーの上に表示されるテキスト - ターミナルアプリケーションで Ctrl キーを押しながら C キーを押して、開発サーバーを停止します。
これで、配布用にプラグインを準備する準備ができました。次はそうするよ
プラグインをビルドする
このセクションでは、プラグインを構築します。これはソースコードを取得し、配布可能な CSS ファイルと JavaScript ファイルを作成します。
-
ターミナルで、次のコマンドを実行します。
$ npm run buildビルドは、ES6 ソースコードを受け取り、ES5 JavaScript コードに変換します。
-
プロジェクトフォルダで、 dist フォルダを展開します。これはあなたのプラグインの配布可能なバージョンを見つける場所です。ここでは、次のファイルがあります (CSS ツールで [ はい] を選択したと仮定します)。
- videojs-demo.css
- videojs-demo.js
- videojs-demo.min.js
また、あまり使用頻度の低いファイルも見つかります。
- videojs-demo.cjs.js
- videojs-demo..js
- これは、WebPack または Rollup を使用して依存関係をバンドルする最新のプロジェクト用の ES6 モジュールです。
- の中に距離フォルダを開き、 videojs-demo.jsファイル。
配布ファイル この配布ファイルについて注意すべき点は次のとおりです。
- ライセンスバナーがファイルの先頭に追加されました。
- プラグインは browserify 名前空間にラップされています。これは、ページコードと競合する可能性のあるグローバル変数がないことを意味します。
- プラグインは内部的に videojs に登録します。つまり、1 つのプレーヤーに対して、それぞれ独立して動作する複数のプラグインを作成できます。
プラグインにデータを渡す
このセクションはオプションです。プラグインにデータを渡す方法を学びたい場合を除き、このセクションはスキップできます。
-
私たちは、プラグインに私たちのHTMLページからデータを渡すために、
optionsプロパティを使用します。このプロパティの使用の詳細については、「プラグインにデータを渡す」ドキュメントを参照してください。 -
エディタで、 src > plugin.js ファイルに戻ります。
-
onPlayerReady()関数で、optionsプロパティ内のテキスト値が存在する場合は、そのテキスト値を使用するコードを追加します。それ以外の場合は、デフォルトのテキスト値を使用します。- 4行目：段落要素を作成します
- 5 行目:テキストクラスタイプを割り当てます
- 6 行目:
displayTextoptionsオブジェクトがプロパティに存在するかどうかを調べる - 7 行目:
displayText値を使用してテキスト表示を設定します - 9行目:デフォルトのテキスト表示値を使用します
- 13行目：表示テキスト要素をDOMに追加します
const onPlayerReady = (player, options) => { player.addClass('vjs-demo'); var textDisplay = document.createElement('p'); textDisplay.className = 'vjs-text'; if ('displayText' in options) { textDisplay.innerHTML = options.displayText; } else { textDisplay.innerHTML = "Becoming a plugin developer"; } player.el().appendChild(textDisplay); }; - ファイルを保存し、テストブラウザに戻ります。テキスト表示に変更はありません。
- まだ行っていない場合は、CSSを追加します。
.vjs-textからのセレクターCSSファイルを編集するセクション。 - プラグインをビルドします。テストウェブページで、 dist フォルダ内のファイルを使用します。
- ローカルテストサーバー (MAMP など) で、 plugin-generator という名前のフォルダーを作成します。
- このフォルダーで、 dist フォルダーから videojs-demo.css ファイルと videojs-demo.js ファイルをコピーし、テストサーバーフォルダーに貼り付けます。プラグインジェネレータ。
- 次に、このフォルダに、
demoプラグインを呼び出し、表示テキストの値を渡すプレーヤーで HTML ファイルを作成します。このファイルには testing.html という名前を付けます。- 8行目:プラグインのスタイルが含まれています。
- 13-22 行目:ウェブページに Brightcove Player を追加します。
- 24 行目には、プラグインの JavaScript ファイルが含まれています。
- 26～32行目:カスタム・ページ・スクリプトを実行します。
- 27 行目プレーヤーの準備ができるのを待つ。
- 28行目プレイヤーへの参照を取得します。
- 29 行目では、
optionsオブジェクトを定義します。 - 30 行目では、
demoプラグインを呼び出し、optionsオブジェクトを渡します。プラグイン名はですがdemo、プラグインファイル名はですvideojs-demo。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Passing data to the plugin</title> <link href="videojs-demo.css" rel="stylesheet"> </head> <body> <video-js id="myPlayerID" data-video-id="5977793284001" data-account="1752604059001" data-player="default" data-embed="default" data-application-id class="video-js" width="640px" height="360px" controls></video-js> <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script> <script type="text/javascript" src="videojs-demo.js"></script> <script type="text/javascript"> videojs.getPlayer('myPlayerID').ready(function() { var myPlayer = this, options = {"displayText": "This data supplied at initialization"}; myPlayer.demo(options); }); </script> </body> </html> - ブラウザで、 testing.html ファイルを実行します。表示テキストの値がプラグインではなくページコードから取得されていることがわかります。
プラグインに渡されるデータ
おすすめ
このジェネレータは、単純なプラグインであっても、すべてのプラグインに使用することをお勧めします。この方法では、すべてのプラグインに対して常に同じ設定ができます。また、リンティングやミニファイングのような特定の機能を実行するためのスクリプトを作成する必要のタスクからあなたを解放します。
このジェネレータを使用すると、基礎となるツールについて心配することなく、プラグインの開発とテストに集中できます。
プラグインはローカルにしておくか、プライベートな GitHub リポジトリに置くことができます。videojs プラグインを作成すると、そのプラグインは Brightcove Player で動作することを意味します。
リソース
ここでは、このクイックスタートで作業する際に使用するリソースの概要を示します。これらのリンクは、以下の手順でも提供されます。
- ダウンロードとインストール: Node.js (これにはnpmも含まれています)
「ほとんどのユーザーに推奨」バージョンを使用してください。
- video.js ジェネレータ
- video.js プラグインの規則
- npmで始めて
- ヨーマン足場ツール