このトピックでは、コンテンツを音声専用モードで再生する Brightcove Player の作成方法を学習します。再生中にビデオ静止画像が表示されるため、ビデオコンテンツは表示されませんが、オーディオトラックは聞こえます。
開発シーケンス
推奨される開発順序は次のとおりです。
- インページ埋め込みプレーヤーの実装を使用して、プレーヤー、プラグイン、CSS の機能をテストします (CSS が必要な場合)
- ローカルテストのためにプラグインのJavaScriptとCSSを別々のファイルに置く
- エラーを解決したら、プラグインコードとCSSをサーバーにデプロイします
- Studio を使用してプラグインと CSS をプレイヤーに追加する
- iframe の実装が適切であると判断した場合は、インページ埋め込みプレーヤーの実装を置き換えます (次のセクションで詳しく説明します)。
これらの手順の詳細については、「ステップバイステップ」を参照してください。プラグイン開発ガイド。
iframe またはページ内埋め込み
Brightcove Player の拡張機能を開発する際には、コードが iframe 実装またはページ内埋め込み実装に最も適しているかどうかを判断する必要があります。ベストプラクティスの推奨事項は、iframe 実装で使用するプラグインを構築することです。iframe プレーヤーを使用する利点は次のとおりです。
- 既存のJavaScriptおよび/またはCSSとの衝突はありません
- 自動応答性
- iframe は、ソーシャルメディアアプリ(または動画が他のアプリに「移動」する必要があるとき)での使用を容易にします。
インページ埋め込みプレーヤーの統合はより複雑になりますが、その実装に関するコードを計画する場合もあります。一般化するために、このアプローチは、包含ページがプレイヤーと通信する必要がある場合に最適です。具体的には、いくつかの例を挙げます。
- 含まれているページのコードは、プレイヤーイベントをリッスンして行動する必要があります
- プレーヤーは包含ページのスタイルを使用します
- iframe は、含まれているページからのリダイレクトのように、アプリロジックが失敗します。
最終実装で iframe コードを使用しない場合でも、JavaScript 用のプラグインと CSS 用の別のファイルを使用して、ページ内埋め込みコードを使用できます。これにより、ロジックがカプセル化され、複数のプレーヤーで簡単に使用できます。
実装を選択
このサンプルでは、ページ内プレーヤーまたは iframe プレーヤーのいずれかを使用できます。ここでは、iframeプレーヤーが使用されています
プレイヤーは
ペンを見るオーディオ専用プレーヤー Brightcove Learning Services( @ rcrooks1969) オンCodePen。
それはどのように動作するか
この方法でオーディオコンテンツを公開する場合、プレーヤーを変更する必要はありません。 Video Cloud ライブラリにオーディオファイルを追加するだけです。 オーディオコンテンツは、ビデオトラックなしの MP4 ビデオの形式である必要があります。
プレーヤーを作成する
プレーヤーを作成し、そのプレーヤーにビデオを割り当てるには、次の手順に従います。
- Playersモジュールで、新しいプレーヤーを作成するか、既存のプレーヤーを使用します。
- Media モジュールで、オーディオのみの項目を選択し、このプレーヤーで公開します。プレーヤーにオーディオコンテンツを割り当て、公開します。
- 基本 (iframe) または詳細設定 (ページ内) 埋め込みコードをコピーし、新しい HTML ファイルに貼り付けます。
- JavaScriptを追加して、再生ボタンのホバーメッセージをから変更します動画を再生しますにオーディオを再生する。高度な埋め込みコードの場合は、JavaScript 用のカスタムプラグインを作成する必要があります。