はじめに
詳細設定 (ページ内) 埋め込みコードを使用すると、プレーヤーを iframe ではなく HTML ページに直接存在させることができます。これは、プレイヤーと関連するプロパティやイベントにアクセスしやすいの利点を提供します。iframe 以外のプレーヤーを使用すると、ソーシャルメディアアプリケーションと共有に含まれる単一のユニットとしてのプレーヤーの使いやすさが失われます。詳細については、「正しい埋め込みコードの選択」を参照してください。
使用法
を使用するにはページはめ込み埋め込みコードは次の手順に従います。
- 使用 プレイヤープレーヤーを作成するモジュール。
- MEDIAモジュールに移動し、新しく作成したプレーヤーを使用してビデオを公開します。
- 高度な埋め込みコードをコピーします。HTML は、次のようになります。
<video-js data-video-id="4093372393001" data-account="1507807800001" data-player="ry3j6rsze" data-embed="default" data-application-id class="video-js" controls></video-js> <script src="https://players.brightcove.net/1507807800001/ry3j6rsze_default/index.min.js"></script> - ブラウザから HTML をコピーし、完全な HTML ページのに貼り付けます。
body - HTML ページを参照して、プレーヤーが機能しているかどうかを確認します。
Media モジュールを使用してビデオを公開する場合、プレーヤーの URL を使用してビデオをプレビューしたり、iframe またはページ内埋め込みコードをコピーして Web ページやアプリケーションに貼り付けることができます。
注:クリック短くするプレビューURLの横にあるボタンをクリックして、短縮されたプレビューURLを生成します。
[ 標準]リンクには iframe 埋め込みコードが表示され、詳細リンクにはページ内埋め込みコードが表示されます。Player Management APIの観点からは、高度と呼ばれるプレーヤーコードembed_in_page実装。
ページ内埋め込みコード (詳細)
一般的なページ内埋め込みコードは次のように表示されます。
<video-js data-video-id="5076962725001"
data-account="1507807800001"
data-player="BkTGbgSq"
data-embed="default"
data-application-id
class="video-js"
controls></video-js>
<script src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.min.js"></script>
インページ発行コードの統合は複雑になりますが、インページコードの使用は、プレーヤーを含むページがプレーヤーと通信する必要がある場合に最適です。ページ内埋め込みコードをいつ使用する場合の例を次に示します。
- 含まれているページのコードは、プレイヤーイベントをリッスンして行動する必要があります
- プレーヤーは親ページのスタイルを使用します
- iframe コードを使用すると、親ページからのリダイレクトのように、アプリケーションロジックが失敗します。
最終的な実装で iframe 埋め込みコードを使用しない場合でも、JavaScript 用のプラグインと CSS 用の別のファイルで In-Page コードを使用できます。これにより、ロジックがカプセル化され、複数のプレーヤーで簡単に使用できます。
Chromeと「壊れた」HTML動画アイコン
Chrome バージョン 67 以降では、<video ...>タグがBrightcove Playerに変換されるまで、壊れた動画アイコンが一時的に表示されます。アイコンは次のように表示されます。
Brightcove Playerバージョン6.11以降を使用している場合は、ビデオタグを次のように変更します。<video-js ...>アイコンは表示されません。
推奨事項
アプリケーションロジックでページ内コードを使用する必要がある場合を除き、iframe 実装を使用することがベストプラクティスと考えられます。 オーディエンスモジュールを使用して視聴者のエンゲージメントを追跡する場合は、ページ内（詳細）埋め込みコードを使用する必要があります。
[属性]
<video>タグには多数の属性があり、プレーヤーの動作に関する追加情報を提供します。次の表に、使用可能な属性の詳細を示します。
| [属性] | 説明 | データタイプ |
|---|---|---|
autoplay |
これが許可されているプラットフォームで、プレーヤーがすぐにプレイを開始する必要があることを示します。 をブール値に設定すると、ブラウザのネイティブの自動再生動作が使用されます。 autoplay次の 3 つの有効な文字列値のいずれかに設定すると、次のようになります。
ビデオを自動再生するには、複雑な状況になる可能性があります。詳細については、「自動再生に関する考慮事項」を参照してください。 |
ブールまたは文字列 |
class |
デフォルトでvideo-js値を割り当てられる標準HTML属性。 | ストリング |
controls |
コントロールをプレーヤーに表示する必要があるかどうかを判断します。 | ブール値 |
crossorigin |
もしも本当、根底にある<video>要素が持つcrossorigin="匿名" .つまり、プレーヤーに取り込まれたビデオやテキストトラックには CORS ヘッダーが必要です。 | ブール値 |
data-account |
アカウント ID。発行者 ID とも呼ばれます。 | ストリング |
data-ad-config-id |
動的デリバリー SSAI 広告設定ID。 | ストリング |
data-application-id |
単一のプレーヤーの再利用が可能ですが、サイトごとまたはアプリケーションごとに分析を区別します。詳細については、「Player 埋め込みコードへのアプリケーション ID の追加」ドキュメントを参照してください。 | ストリング |
| データ埋め込み | 埋込みを使用している場合 (親子プレーヤー関係) の情報が表示されます。 | ストリング |
data-player |
プレーヤー ID を設定します。 | ストリング |
data-playlist-id |
プレーヤー内のプレイリストの ID または参照 ID を設定します。 | ストリング |
data-playlist-video-id |
ビデオで再生される最初のビデオを設定します。このビデオは、指定されたプレイリストにある必要があります。 | ストリング |
data-start-time |
ビデオの再生を開始する時間オフセットを設定します。詳細については、ディープリンクのドキュメントを参照してください。 | ストリング |
| データビデオ ID | プレーヤー内の動画の ID または参照 ID を設定します。 | ストリング |
| 高さ | ビデオの表示高さを設定します。ピクセル単位で指定します。高さにパーセンテージを使用する詳細については、Player のサイズ設定に関するドキュメントを参照してください。 | [番号] |
lang |
プレーヤーの言語 (有効な言語コード、通常は二文字) を設定します。 | ストリング |
loop |
ビデオが終了するとすぐに最初からやり直すようにします。 | ブール値 |
muted |
ビデオのサウンドをミュートします。 | ブール値 |
| プレイシンライン | プラットフォームとOSで許可されている場合、はプレーヤーの再生エリア内にビデオコンテンツを表示します。つまり、フルスクリーンやサイズ変更可能な独立したウィンドウには表示されません。iPhoneとiPadでは動作しますか | ブール値 |
| プリロード | ビデオタグがロードされるとすぐにビデオデータのダウンロードを開始する必要があるかどうかをブラウザに通知します。指定できる値はnone、metadataautoまたはです。詳細については、次のセクションを参照してください。 |
ストリング |
width |
ビデオの表示幅を設定します。ピクセル単位で指定します。幅にパーセンテージを使用する詳細については、Player のサイズ設定に関するドキュメントを参照してください。 | [番号] |
プリロードの詳細
preload 属性は、ビデオタグがロードされるとすぐにビデオデータのダウンロードを開始するかどうかをブラウザに通知します。オプションは、auto、metadata、noneおよびです。HLS 再生技術の場合、設定は少し異なることを意味し、以下に記します。
-
auto( デフォルト):すぐにビデオの読み込みを開始します（ブラウザが同意した場合）。iPhoneやiPadなどの一部のモバイルデバイスでは、' ユーザーの帯域幅を保護するためにビデオをプリロードしません。これが、値が自動と呼ばれ、真のような最終的なものではない理由です。 metadata:ビデオのメタデータのみをロードします。これには、ビデオの長さやサイズなどの情報が含まれています。none:ビデオデータをプリロードしないでください。これは、ユーザーが [再生] をクリックしてダウンロードを開始するまで待機します。iOS では、この設定でもセグメントのダウンロードが発生する可能性があることに注意してください。詳細については、Brightcove Playerと iOSのドキュメントを参照してください。
<video-js preload ...>
or
{ "preload": "auto" }