Brightcoveプレーヤ 5 から 6 への移行ガイド
概要
Video.js 6 での下位互換性のない変更は Video.js Wiki に記載されていますが、この文書は、Video.js 5 から 6 への移行には適用されない Brightcove Player 6 に固有の追加の移行ガイドラインに使用できます。
Brightcove Player 5 の重要な部分は、プレーヤーの設定値によってトリガーされた互換性プラグインでした。
"compatibility": true
5.x プレーヤーでは、この設定はデフォルトでオンになっています。その効果は、Video.js 4 API を「シム」するプラグインを含めることで、より多くのカスタマープラグインとインテグレーションが Brightcove Player 5 の自動更新でシームレスに機能するようになりました。
ブライトコーブプレイヤー 6 以降、このシムはプレーヤーの一部ではなくなりました。5 から 6 に更新する場合は、 Video.js Wiki にある前述のドキュメントに従って、そのコードが Video.js 6 API と互換性があることを確認する必要があります。次のセクションでは、更新時に考慮する必要がある変更について説明します。
player.tech
Brightcove Player のバージョン 6 では、player.tech
は、バージョン 5 のようにプレーヤーのプロパティではなく、現在の再生技術を返す関数です。シムは、技術オブジェクトから技術関数にいくつかのプロパティをマップしたので、player.tech
技術オブジェクトであると予想されるコードはエラーをスローしません。
プレーヤーのサイズ変更
Video.js 4 では、プレーヤーのサイズは JavaScript を使用して設定されました。Video.js 5 では、新しい CSS ベースのサイズ設定スキームが導入され、プレイヤーの寸法に問題が生じました。シムは、バージョン4で行ったように動作するようにこれらの変更をロールバックしました。
実際には、Brightcove Player v6 を使用する場合、height
width
動画タグのおよびはピクセル単位でのみ測定されます。。実際、height
width
属性と属性の単位はまったく入力しません。
width="480"
幅と高さを次のように設定できます100%バージョン5では、これはバージョン6では機能しなくなりました。これは、CSSを使用して2つの異なる方法で達成することができます。
style
video
タグで属性を使用する。<video-js data-video-id="5622718636001" data-account="1507807800001" data-player="default" data-embed="default" data-application-id class="video-js" controls style="width: 100%;height: 100%"></video-js> <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
style
タグを使う。... <style> .video-js { height: 100%; width: 100%; } </style> ... <video-js data-account="1752604059001" data-player="H1xW7NWcz" data-embed="default" data-application-id class="video-js" controls></video-js> <script src="https://players.brightcove.net/1752604059001/H1xW7NWcz_default/index.min.js"></script>
コンポーネントコンストラクター
Video.js 4 および shim 経由のバージョン 5 では、コンポーネントコンストラクタ ( Player
やなどControlBar
) がvideojs
関数:
videojs.${ComponentName}
これはもはやそうではありません。videojs.getComponent
代わりに関数を使用する必要があります。
var ControlBar = videojs.getComponent('ControlBar');
スライダーハンドルコンポーネント
このコンポーネントは 5.x プレーヤーにはいませんが、それを拡張していたユーザーのために shim によって復元されました。これで完全に削除されます。
プロパティ/メソッドと代替
次に、4.x のいくつかの Video.js プロパティが、互換性シムによって 5.x にコピーされました。これらは 6.x には存在しませんが、代替手段が提供されます。
削除しました | オルタナティブ |
---|---|
VJS | videojs |
VideoJs.json | JSON |
Videojs.user_agent | window.Navigator.userAgent |
Videojs.eventemitter | videojs.eventTarget |
Videojs.obj.isArray | array.isArray |
videojs.round (数、数字) | 数値 (数字.ToFixed (数字)) |
videojs.trim (str) | str.trim () |
Videojs.util.mergeOptions | Videojs.MergeOptions |
カスタムプラグインの作成
Brightcove Player のバージョン 5 では、videojs.plugin()
カスタムプラグインを作成したときにプラグインの最初の行がメソッドを使用していました。例:
videojs.plugin('scrollIntoView', function() {
var myPlayer = this,
isAdPlaying = false;
...
videojs.registerPlugin()
代わりにメソッドを使用する必要があります。例:
videojs.registerPlugin('scrollIntoView', function() {
var myPlayer = this,
isAdPlaying = false;
バージョン 6 では非推奨ですが、videojs.plugin()
使用するとエラーは発生しませんが、コンソールに警告が表示されます。使用できませんvideojs.registerPlugin()
バージョン5のプレーヤーで。
IMA3プラグイン
ブライトコーブ Player 6 にアップグレードした後、Studio を使用して IMA3 プラグインを手動で再インストールする必要があります。ステップバイステップを参照してください。詳細については、広告文書を実装します。
プレーヤー管理 API を使い慣れている場合は、カールを使用して IMA3 プラグインをアップグレードすることもできます。具体的には、プレーヤーを更新するためのAPIリファレンスを次に示します。これは、 実際にプレーヤーをアップグレードするために使用するのと同じプレーヤー管理 API 呼び出しで実行できることに注意してください。
フラッシュ HLS と crossdomain.xml
Brightcove Player リリース 6.13.0 以降を使用する特殊なケースでは、 crossdomain.xml ファイルを使用する必要があります。これは、次の場合に必要です。
- 独自の CDN を使用しています。
- Flashを使用する必要があるように、Brightcove Playerを使用しています。この問題が発生した時期については、「どのレンディションが再生されるかを決定する」を参照してください。
これらの条件が満たされている場合は、メディアが提供されるルートドメインで crossdomain.xml ファイルを使用する必要があります。たとえば、コンテンツを提供している場合
https://www.domain.com/media/video.m3u8
次に、 crossdomain.xml ファイルは
https://www.domain.com/crossdomain.xml
プレーヤーの swf がホストされているためplayers.brightcove.net
、を使用することをお勧めします*.brightcove.net
。 crossdomain.xml の例は、次のように表示されます。
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*.brightcove.net" />
</cross-domain-policy>
適切なドメインを指定する必要があります。詳細については、クイックヒントを参照してください。クロスドメインポリシーファイルのガイド。
HTTPS の操作
HTTP ページから HTTPS アセットをロードする場合、またはその逆の場合は、secure
次の値を持つ属性を含める必要があります。false
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*.brightcove.net" secure="false"/>
</cross-domain-policy>