ここブライトコーブのコア Web プレーヤ チームの使命の 1 つは、ブライトコーブ プレーヤとの統合の障壁を取り除くことです。プレーヤの柔軟性、安定性、使いやすさで、お客様に喜んでいただくことを目指しています。
HTML5 ウェブ プレーヤーの基本的なアーキテクチャは、過去 5 年間ほどほとんど変わっていません。プレーヤーは、Player Management APIまたはStudio（APIを使用）を介して管理され、オンデマンドで公開され、以下の当社のCDNでホストされます。 players.brightcove.net スタンドアロンのスクリプトとして
この5年間、ウェブツールはより洗練され続け、CDNでホストされたJavaScriptは新しいパラダイムに適合しないことが多い。代わりに <script> タグをウェブテンプレートやCMSに追加することを期待しているウェブ開発者やその他の上級ユーザーは、以下の方法でパッケージをインストールできることを期待しています。 npm, import それは ESモジュールを介してアプリケーションにバンドルする。 ウェブパック, ロールアップまたは同様のもの。
これまでは、このような先進的なユーザーのほとんどが独自のソリューションを展開していました。これは、私たちのPlayerエコシステムが顧客のニーズを十分に満たしておらず、これらのユーザーが私たちと共にではなく、私たちの周囲で作業することを余儀なくされていることを物語っています。このようなユーザーにより良いサービスを提供するために、私たちは現在、ほとんどの最新のウェブ・ツーリング・スタックで使用できる、無料のオープンソース・ツールのオプション・スイートを提供しています。
これらのツールを総称して、Brightcove Player Toolbox と呼びます。
2018年現在、ツールボックスには以下のものが含まれている：
プレーヤーローダー
プレーヤ ローダは、フレームワークやツールに依存しない、ブライトコーブ プレーヤ用の公式の非同期スクリプト ローダおよび埋め込みジェネレータです。特定のツールチェーンに依存せず、2 つの目的を果たします：
- 多くのオプションと、一部の Brightcove Player プラグインで必要なカスタマイズをサポートする埋め込みコードを生成します。
- プレーヤースクリプトを当社のCDNから非同期にダウンロードし、一致するエンベッドを自動的に初期化します。
このツールは完全にランタイムで設定される。つまり、常に最新のプレーヤーをランタイムでダウンロードする。
Player Loader は npm で次のように提供されています。 @brightcove/player-loader.を読んで始めよう。 README または ブライトコーブのドキュメント.
例
注：この例ではESモジュールを使用していますが、必須ではありません。CommonJS、AMD、または単純なスクリプト・タグも使用できるはずです。
<body>
<div id="player-container"></div>
</body>
import brightcovePlayerLoader from '@brightcove/player-loader';
brightcovePlayerLoader({
refNode: '#player-container',
accountId: '123456789',
playerId: 'AbCDeFgHi',
videoId: '987654321'
})
.then(function(success) {
// The player has been created!
// success.type will be "in-page" or "iframe"
// success.ref will be the player or the iframe element
})
.catch(function(error) {
// Player creation failed!
});
リアクト・プレーヤー・ローダー
React Player Loaderプロジェクトは、裏側の Player Loader を使用して Brightcove Player を埋め込み、ダウンロードするために使用できる、公式の React コンポーネントをユーザーに提供します。
このコンポーネントは Player Loader のすべてのオプション（いくつかの例外を除く）を取り、React コンポーネントがアンマウントされたときにプレーヤーを破棄する処理を行います。
React Player Loader は npm で次のように入手できます。 @brightcove/react-player-loader.を読んで始めよう。 README または ブライトコーブのドキュメント.
例（JSX）
注： React/ReactDOM/global これらは動作例を示すために使用されているだけであり、必須ではありません。
import document from 'global/document';
import React from 'react';
import ReactDOM from 'react-dom';
import BrightcovePlayer from '@brightcove/react-player-loader';
let brightcovePlayer;
// A success callback will offer two ways of accessing the underlying player
// or iframe.
const onSuccess = function(success) {
console.log(success.ref);
console.log(brightcovePlayer.player);
};
brightcovePlayer = ReactDOM.render(
<BrightcovePlayer accountId='1234678' onSuccess={onSuccess}/>,
document.getElementById('fixture')
);
プレーヤーローダー WEBPACK プラグイン
Player Loader webpack Pluginは、Brightcove Player をバンドルするための公式 webpack プラグインです。このプラグインの目的はただ 1 つ、Brightcove Player を webpack バンドルにプリペンドし、余分な非同期 HTTP リクエストを回避することです。
Brightcove Player Loader とは異なり、このツールはエンベッドを作成しません。
しかし、Player Loaderと一緒に使うこともできます。このセットアップでは、Webpack プラグインがプレーヤを事前に入力し、Player Loader がエンベッドの生成に使用されます。Player Loader は、事前にダウンロード済みまたはメモリ内で検出した Brightcove プレーヤを再ダウンロードしないため、バンドルにプリペンドされたプレーヤは再ダウンロードされません。
このツールの1つの注意点は、ビルド時にのみプレーヤーをダウンロードすることです。つまり、プレーヤーを再公開する場合は、Webサイト上でプレーヤーが更新される前に、Webpackバンドルを再作成する必要があります。
Player Loader webpack Plugin は npm で次のように入手できます。 @brightcove/player-loader-webpack-plugin.を読んで始めよう。 README.
例
次のコード例は webpack.config.js ファイル。
const PlayerLoaderPlugin = require('@brightcove/player-loader-webpack-plugin');
module.exports = {
// Other webpack configuration here...
plugins: [
new PlayerLoaderPlugin({accountId: '123456789', playerId: 'AbCDeFgHi'})
]
};
結論
この新しいツール集が、最新のツールチェインで Brightcove Player を使用するお客様のお役に立つことを願っています。
Brightcove Player はフリーでもオープンソースでもありませんが、Brightcove Player Toolbox を構成するツールはすべてフリーでオープンソースであり、Apache-2.0 ライセンスの下にあります。
つまり、これらは Brightcove, Inc によって公式にサポートされておらず、フィードバックやバグ報告はブライトコーブ カスタマ サポートに直接行われるべきものではありません。
この注意点はさておき、私たちのエンジニアはオープンソースを知らないわけではなく、GitHubでのフィードバック、バグレポート、プルリクエストに全力で対応することを約束します。
私たちは、誰もがこれらのオープンソースツールをより良いものにできるよう、貢献することを歓迎し、奨励しています！
参考文献
リポジトリとオープンソースドキュメント
ブライトコーブ サポート文書
