サポートに連絡する| システムステータス
ページコンテンツ

    Brightcove Player 7 移行ガイド

    このトピックでは、Brightcove Player 7のメジャーバージョン リリースに伴う改善点と新しい機能について説明します。

    イントロダクション

    バージョン 7 は、Brightcove Playerの最新のメジャー バージョン リリースです。プレーヤーの変更および改善点には、Video.js 8 および VHS (Video.js HTTP Streaming) 3つが含まれます。

    機能・改善点は以下の通りになります:

    • 最新のブラウザに対応したデザイン
    • デフォルトでES6を使用
    • 新しいビューアビリティ イベント
    • Adaptive Bitrate (ABR) アルゴリズムの改善
    • プラグイン不要でContent Protection (DRM) をサポート
    • IE11のサポートを削除

    デザイン チームは、プレーヤー 7 のいくつかの新しいエキサイティングな UX の変更に取り組んでおり、近い将来に導入される予定です。これらには以下が含まれます:

    • 新しいデフォルト レイアウト
    • プレーヤーの挙動の改善

    弊社、Brightcove Player が業界をリードする Web ビデオプレーヤであり続けていることを非常に誇りに思っています。概要についてはWhat Makes a Great Online Video Player? Announcing Brightcove's Player v7をご覧ください。

    バージョン7へのアップグレード

    Brightcove Player 7.0.0 が利用可能になりました。既存のプレーヤーはこのバージョンに自動更新されませんが、スタジオでプレーヤーをアップグレードすることができます。

    1. Video Cloud スタジオで、Players モジュールに移動します。
    2. 新規プレーヤーを作成するか、既存のプレーヤーを開きます。

      Player information
    3. プレーヤー情報 セクションにて、プレーヤーのバージョンまでスクロールします。
      1. 更新モード自動 に設定されていることを確認して下さい。詳しくは制限事項をご覧下さい。
      2. Upgrade to Brightcove Player 7をクリックします。
      3. 保存をクリックします。
      4. 公開と埋込みをクリックします。
      Upgrade to player 7
    4. 変更の公開閉じるの順にクリックします。

    ブラウザとデバイスの対応

    更新されたシステム要件

    Brightcove Player 7 のシステム要件は、以下のとおりです。:

    ブラウザ/エンジン プラットフォーム/OS 最小バージョン
    Chrome Windows, macOS, Android, iPadOS [1], iOS [1] 現行バージョンと過去2回のメジャーバージョン
    Edge Windows, macOS, Android, iPadOS [1], iOS [1] 現行バージョンと過去2回のメジャーバージョン
    Firefox Windows, macOS, Android, iPadOS [1], iOS [1] 現行バージョンと過去2回のメジャーバージョン
    Safari macOS, iPadOS, iOS 現行バージョンと過去2回のメジャーバージョン

    以下の注記は上表を参照しています。

    [1] iPadOSとiOSでは、Safariブラウザエンジンのみが許可されています。ChromeやFirefox、Edgeなどの代替ブラウザは、Safariを内部で使用しています。この場合ブラウザの動作は、実際のバージョンと一致しません。

    Internet Explorer 11

    2021 年 6 月 15 日およびBrightcove Player 6.56.0 の時点で IE11 の公式サポートを終了しました。この時点以降、 IE ブラウザに積極的に介入しないようにしてきました。これはプレーヤー 7 には当てはまりません。

    Brightcove Player 7.0.0 では、IE11 をサポートするためのコードをすべて削除したため、IE ではプレーヤーが機能しません。

    視聴者がIEで再生しようとすると、プレーヤーがInternet Explorerを検出し、"unsupported browser" というメッセージを表示します。

    以下の各セクションの変更点には、どの主要コンポーネントが影響を受けたかを示す括弧付きの略語が記載されています。:

    • BCP7: この変更は Brightcove Player 7 に適用されます。
    • VJS8: この変更はVideo.js 8に適用されます。
    • VHS3: この変更は、Video.js HTTP Streaming 3 に適用されます。

    本ガイドにおける対象外

    このガイドでは、Brightcove Player 7 のユーザー向けの変更点のみを取り上げていることに、ご留意ください。

    当社のエンジニアが今後のプレーヤーの開発を容易にするための、コード構成に関連する重要な内部変更については説明いたしません。Brightcove Player が、10 年近く継続的に開発された後でも、業界をリードする Web 動画プレーヤであり続けていることを非常に誇りに思います。

    機能と拡張

    機能と拡張機能は、プレーヤーの新しい機能、または大幅に変更または改善された機能と動作を指します。

    ES6デフォルト

    変更は、VJS8,VHS3,BCP7に適用されます。

    Brightcove Player 7 のほとんどは、Video.js や VHS など、ES5 コードにトランスパイルされなくなりました。

    大部分のコードは、最新のブラウザエンジンをターゲットにトランスパイルされるようになりました。その結果、コード全体のパッケージサイズを3~5%削減することができたのは素晴らしい成果でした。

    移行に関する考慮事項

    ネイティブ ES6 クラスを継承しようとしたが最終的に ES5 にトランスパイルされたコードは、Video.js 8 および Brightcove Player 7 で動作しなくなります。この非互換性は、通常、以下のようなメッセージを含むエラーがスローされることで表面化します:

    TypeError: Class constructor ___ cannot be invoked without 'new'
    

    これは、BabelのようなトランスパイルツールがクラスをプレーンなJavaScript関数に変換し、その上で apply()call() を呼び出そうとするためです。これらのメソッドは関数には存在しますが、ES6クラスには存在しません。

    唯一の解決策は、Video.js 8 および Brightcove Player 7 で使用するために ES6 クラスを ES5 にトランスパイルしないことです。

    ビューアビリティ イベントと動作

    変更は、BCP7に適用されます。

    プレーヤのビューアビリティは、広告の統合やフローティング プレーヤーなどの一部の UI 処理にとって非常に重要です。この文脈では、「ビューアビリティ」を、ブラウザのビューポートでいつでも見えるプレーヤーの割合といて定義しています。プレーヤーの特定の割合がビューポート内にある場合、そのプレーヤーは「表示可能」と見なされます。

    Brightcove Player 7 では、ビューアビリティ トラッキング DOM イベントと、プレーヤーの表示可能な状態に依存するいくつかの便利な動作が導入されています。

    プレーヤー設定

    プレーヤーのビューアビリティ イベントと動作は、プレーヤーの JSONエディターで設定することができます。すべての設定は、viewability プロパティで利用できます。

    プロパティ 説明 タイプ デフォルト
    viewability_threshold プレーヤーが「表示可能」とみなされるためにビューポート内に存在する必要があるプレーヤーの部分を表す 0 から 1 までの数値 number 0.6
    min_duration_for_viewable_impression 広告の再生が開始されてから、視認可能なインプレッションをテストするまで待機する時間(ミリ秒)を表します。

    デフォルトでは、広告を再生して 2 秒後に、viewable-ad-impression イベントを使用して、広告インプレッションが表示可能かどうかをプレーヤが報告することを意味します。
    number 2000
    threshold_percentage_increment viewable-percent-change イベント間で必要なビューアビリティの変化量。

    デフォルト値 5 は、プレーヤーのビューアビリティが5%変化した場合のみ、viewable-percent-change イベントが発生することを意味します。(例:45% から 50%に変化)。

    多くのイベントが発生するため、これ以上細分化しないことを推奨します。
    number 5
    delay_autoplay_if_not_viewable 自動再生に設定されているプレーヤーとのみ対話します。

    true の場合、プレーヤーが表示可能になるまで再生の試行を遅らせる。

    false の場合、ビューアビリティの状態に関係なく、プレーヤーは再生を試みます。これは、自動再生プレーヤーのデフォルトの動作です。
    boolean false
    delay_autoplay_on_mobile_only true の場合、ディレイ・オートプレイ機能はモバイル環境(iOSまたはAndroid)のみで有効になります。

    : この場合、タブレット端末はモバイル環境とみなされます。
    boolean true
    pause_when_not_viewable true の場合、プレーヤーが表示不能になった場合、再生を一時停止します。再び表示可能になると、再生が再開されます。

    false の場合、viewable-change 時にプレーヤーの一時停止または再生が切り替わりません。これは、プレーヤのデフォルトの動作です。
    boolean false

    以下は、ビューアビリティを含むプレーヤー設定のJSONになります:

    {
      ... other properties ...
      "viewability": {
        "viewability_threshold": 0.7,
        "pause_when_not_viewable": true
      }
    }

    この例では、ユーザーがプレーヤーをスクロールして視界から外したことにより、ブラウザーのビューポートにプレーヤーが70%未満しか表示されなくなると、再生が一時停止します。プレーヤーが再び表示されると、再生が再開されます。

    ビューアビリティ イベント

    ユーザーは、ビューアビリティに関連する3つの新しいイベントにフックすることができます。

    • viewable-change

      このイベントは、プレイヤーが表示可能な状態に遷移したとき、または表示可能な状態から遷移したときに発生します。

      プロパティ タイプ 説明
      viewable boolean プレーヤーが表示可能な状態かどうかを表します。
      viewablePercent number 現在ビューポートに表示されているプレーヤーのパーセンテージを表します。
      player.on('viewable-change', (e) => {
        if (e.viewable) {
          player.log('the player is viewable!');
        } else {
          player.log('the player is not viewable!');
        }
      });

    • viewable-percent-change

      このイベントは、プレーヤーの表示可能なパーセンテージが変化したときに発生します。

      プロパティ タイプ 説明
      viewable boolean プレーヤーが視聴可能な状態であるかどうかを表します。
      viewablePercent number 現在ビューポートに表示されているプレーヤーのパーセンテージを表します。
      player.on('viewable-percent-change', (e) => {
        player.log(`the player is ${e.viewablePercent}% viewable!`);
      });

    • viewable-ad-impression

      このイベントは、視認可能な広告のインプレッションが測定された時に発生します。広告再生のコンテキスト外では発生しません。

      つまり、広告が開始され、プレーヤが表示可能な状態で min_duration_for_viewable_impression で表されるミリ秒数だけ再生されると、このイベントが発生します。

      このイベントには、追加のデータは渡されません。

    DRMをデフォルトでサポート

    変更は、BCP7に適用されます。

    Brightcove Player 7 では、既存の DRM プラグインは不要になります。以前のプレーヤのバージョンと同じ方法で、DRM を迅速にサポートします。

    これにより、メディア コンテンツで DRM 保護を有効にするだけで、DRM を簡単に設定できます。プレーヤーでも有効にする必要はありません。

    移行は必要ありません。 DRM プラグインと Player 7 で構成されたプレーヤーは壊れることはありません。

    タイムアウト エラーの機能強化

    変更は、BCP7に適用されます。

    Brightcove Player は、タイムアウトと呼ばれる特殊なエラーを長い間サポートしてきました。これは通常、プレーヤーがコンテンツを再生していることを想定している(つまり、一時停止していない)が、再生が進行していないことを意味します。一般的に、これはネットワークの問題や、マニフェスト URL の TTL の有効期限切れなどで、プレーヤーが停止し、コンテンツがバッファリングできないことを意味します。

    これを「エラー」と呼んでいますが、一般的なエラーとは異なり、回復可能であることが特徴です。例えば、ネットワークの状態が改善し、コンテンツのバッファリングが回復すると、再生を再開することができます。

    Player 6 では、再生が再開されてもエラー モーダル ダイアログが閉じず、視聴体験が悪くなることがありました。

    今後、プレーヤのタイムアウト モーダル ダイアログでは、視聴者がそれを閉じるか、Playback API から動画ソースをリロードして新しいマニフェスト URL を取得するかを選択できるようになります。後者の場合、プレーヤーは VOD ストリームの再生位置を保持します。これは理想的な体験ではありませんが、機能しないプレーヤよりは良いと考えます。

    サポート対象外のブラウザ UI

    変更は、BCP7に適用されます。

    Player 6では、サポートされていないブラウザで読み込まれた場合、エラーが発生し、ブラウザのコンソールに記録される可能性が高いですが、視聴者には何も表示されません。

    Player 7では、このようなケースをより明確にするために、新しいUIが用意されています。サポートされていないブラウザでプレーヤーを読み込むと、次のようなメッセージが表示されます。:

    Unsupported browser message

    このエラーが発生する可能性があるのは、次の2つのケースです:

    • Internet Explorerなどの非対応ブラウザを使用した場合。
    • プレーヤーの初期化処理中に、捕捉されない JavaScript エラーが発生した場合。

    お使いのブラウザがサポートされているはずなのに、このメッセージが表示された場合、ブラウザのコンソールを確認してください。エラーが自身のコードから発生している場合、対処できる可能性があります。そうでない場合は、ブライトコーブ カスタマーサポート にお問合せください。

    Analytics Player イベントの名前変更

    変更は、BCP7に適用されます。

    バージョン 7 以前では、プレーヤーは analytics_request イベントと analytics_request_* イベント( * は分析ビーコン イベント名を表す)をトリガーしていました。 例えば、プレーヤーが video_engagement イベントを表すビーコンを送信すると、両方がトリガーされます:

    • analytics_request
    • analytics_request_video_engagement

    イベントの命名に一貫性を持たせるために、小文字のハイフンでつないだイベント名を使用したいと考えています。 Data Collection API に送信される小さな HTTP リクエストについて説明するときは、それらを「ビーコン」と呼ぶため、その用語も同様に使用しています。

    これらのイベント名を以下の様に変更しました: (* は、analyticsビーコンイベント名を表し、 _-に置き換えています)。

    • analytics-beacon
    • analytics-beacon-*

    プレーヤーが video_engagement ビーコンをいつ送信したかを知りたい場合、次の様にすることが出来ます:

    player.on('analytics-beacon-video-engagement', (e) => {
      // The event object in the callback contains a `params` object, which
      // has a JavaScript object representataion of the query params that
      // were sent to the Data Collection API.
      player.log('video_engagement beacon sent!', e.params);
    });

    Analytics play_request イベント

    変更は、BCP7に適用されます。

    Brightcove Player 7は、視聴者が再生ボタンを押すか、何らかの方法で自動再生する (例えばplay() メソッドを呼び出す)ことにより、再生開始の要求が最初にあった場合にのみ、 play_request ビーコンを送信します。

    以前のバージョンでは、プレーヤーの play イベントが発生すると、play_request ビーコンを送信していました。これには、視聴者が一時停止して再開したり、クライアントサイドの広告が終了してコンテンツの再生に戻ったりするなど、コンテンツの再生が要求される場合が含まれます。

    弊社、製品部門とデータ部門はこれについて話し合い、このイベントの目的は、再生を開始する最初のリクエストを追跡することであると判断しました。これは、play_request メトリックを追跡している人は、Player 7 にアップグレードした後にその数値が低下する可能性が高いことを意味します。この現象が発生しても、それは問題があることを示している訳ではありません。

    プレーヤー video_complete イベント

    変更は、BCP7に適用されます。

    Video Cloud analytics では、 video_complete イベントは使用されず、BCP7から削除されました。 つまり、次のようになります:

    • analytics-beacon-video-complete イベントはありません。
    • params.eventvideo_complete を指定したanalytics-beacon イベントがない。

    Brightcoveの名前空間

    変更は、BCP7に適用されます。

    ユーザーの混乱は原因は、Brightcove Playerの各インスタンスにアタッチされた異なるオブジェクトにまたがるコア プロパティとメソッドの増殖にありました。この例として、 bcAnalyticscatalogが挙げられます。

    プレーヤー7では、これらの異なる機能を新しいコア名前空間への統合を開始します:

    • brightcove

    この名前空間は、Brightcove特有のプレーヤーの機能強化や統合のための唯一の場所になります。この名前空間は、各プレーヤー インスタンスのプロパティとして添付されます。

    目標

    brightcove の名前空間の目標は次の通りです:

    • 内部的には、Brightcove Player の複数のサブコンポーネントやプラグインにまたがる複雑さや重複するコードを削減することが目標です。
    • 外部的には、異なるコア機能の断片を単一の名前空間に統一することで、統合開発者のエクスペリエンスを向上させることが目的です。

    現時点で、この名前空間にはいくつかのユーティリティ関数のみ公開しています。それらは以下の様にアクセスできます:

    • brightcove.util

    これらのうちいくつかはVideo.jsのユーティリティ関数のコピーですが、これらも時間をかけて統一していく予定です。このオブジェクトで公開される関数の数は多すぎるため、ここでは紹介しきれませんが、完全なドキュメントは近日中に公開する予定です。

    ここではまだ移行は必要ありませんが、中央の brightcove 名前空間を介して機能を公開することは、このオブジェクトに機能を移植し、古いプロパティ/メソッドを非推奨とする反復プロセスになります。メジャー リリースでは後方互換性を維持するため、 bcAnalyticscatalog は、Brightcove Player 8 まで削除されないことに留意してください。

    ABRアルゴリズムの改善

    変更は、VJS8/VHS3/BCP7に適用されます。

    VHS と Brightcove Player が使用する ABR アルゴリズムは、より高いビットレート選択を維持しながら、再バッファリング イベントを減らすことを目標に改良されています。これは、最新の帯域幅推定値だけでなく、移動平均帯域幅推定値を使用することで実現されています。

    さらに、低レンディションに切り替えるために、バッファリングされた高画質コンテンツを破棄しないように、レンディション切り替えのタイミングを工夫することで、帯域幅の使用を最適化することを目指しています。

    これらの調整の背景にある考え方については、こちらの GitHub Gist で、最終的な実装についてはこちらの GitHub pull requestでご覧頂けます。

    ABRアルゴリズムについて詳しくは、再生するレンディションの決定 のドキュメントをご覧下さい。

    sourceset イベント

    変更は、VJS8/BCP7に適用されます。

    このイベントは Video.js で機能フラグの後ろに何年も前から存在していました。ソースが変更されているかどうかを検出に使用される、標準イベント loadstart の前に、プレーヤーのソースが変更されているか検出する方法として、デフォルトでこのイベントを有効にしました。

    player.on('sourceset', (e) => {
      player.log('The media source is changing!');
    });

    エラー時の再試行

    変更は、VJS8/BCP7に適用されます。

    プレーヤーにソースのリストが与えられ、最初のソースの読み込みに失敗した場合、Video.js は、再生できるソースを見つけるかソースがなくなるまで、次のメディア ソースを順に試行します。

    再生APIを経由する場合、このエラー状態が発生することはほとんどないため、Playerのみ使用するお客様により関係があります。

    TitleBar コンポーネント

    変更は、VJS8/BCP7に適用されます。

    videojs-dock プラグインを削除し、同様の機能を Video.jsの新しいコア コンポーネントである TitleBar コンポーネントで再実装しました。

    新しい TitleBar コンポーネントは、プレーヤの上部に UI 要素を表示し、プレーヤ内の現在のメディアのタイトルや説明を表示します。タイトルや説明が提供されていない場合、TitleBar は表示されません。

    Video Cloud ご利用のお客様

    プレーヤが Playback API を介して Video Cloud と統合されている場合、TitleBar は、自動的に入力されます。

    Playerのみご利用のお客様

    プレーヤーのみご利用されているお客様は、次のいずれかの方法を使用して、 TitleBar を設定できます:

    • loadMedia を使用して TitleBarを設定します。

      タイトルや説明を提供する最も簡単な方法は、プレーヤーの loadMedia メソッドを使用することです:

      player.loadMedia({
        artist: 'Extremely',
        album: 'Oceans',
        title: 'Oceans',
        description: 'Journey in to the depths ... and race with dolphins at play.',
        poster: 'https://vjs.zencdn.net/v/oceans.png',
        src: [{
          src: 'https://vjs.zencdn.net/v/oceans.mp4',
          type: 'video/mp4'
        }, {
          src: 'https://vjs.zencdn.net/v/oceans.webm',
          type: 'video/webm'
        }]
      })

      loadMedia メソッドに馴染みのない場合、これはsrcメソッドだけで利用できるもの以外に、メディアに追加のメタデータを提供する方法になります。 上記の例では、タイトルと説明が提供され、TitleBarの表示に使用されています。

    • TitleBar を直接設定する

      TitleBar は、コンポーネントの update メソッドを使用して直接入力することも可能です:

      player.titleBar.update({
        title: 'Oceans',
        description: 'Journey in to the depths ... and race with dolphins at play.'
      });

      タイトルや説明は、これらの値の一方または両方に空文字列を渡すことで削除することができます:

      player.titleBar.update({
        title: '',
        description: ''
      });

      両方が削除されると、 TitleBar は表示されなくなります。

    Brightcove Playerの移行

    大部分のBrightcoveのお客様に、この移行は必要ないと思われます。

    ただし、player.dock に依存するサードパーティのコードは、 Playerのみご利用のお客様のセクションで述べたように TitleBar のAPIを使用するように更新する必要がある可能性があります。

    Video.jsのユーティリティ・オブジェクト

    変更は、VJS8/VHS3/BCP7に適用されます。

    時間が経つにつれ、videojs 名前空間は、多種多様なユーティリティ関数で煩雑になってきました。Brightcoveは、これらのユーティリティ関数に対して、より意図的に設計されたインタフェースを導入しています。

    ここでの原則は、もしある関数がライブラリーの中心的な部分とは思えないが、それでも潜在的に有用であるならば、トップレベルの関数ではなく、ユーティリティオブジェクトの一部として公開するというものでした。

    8.0.0 videojs に付属するユーティリティオブジェクトは次の通りです:

    Object Description
    videojs.dom DOM関数 (以前から利用可能)
    videojs.fn Function... 関数
    videojs.num 数値関数
    videojs.obj オブジェクト関数
    videojs.str 文字列関数
    videojs.time 時間相関関数
    videojs.url URL関連関数
    videojs.browser 各種ユーザーエージェント検出値(以前から利用可能)

    その他のBrightcove Playerの機能および機能強化

    変更は、BCP7に適用されます。

    • not-hover のクラス名は vjs-hide-controlsに変更されました。

      この古いクラスの名前は、弊社の命名基準に則しておらず、その目的も不明確でした。このクラス名をターゲットにしたCSS(またはJavaScript)は、更新する必要があります。

    • Video.js CSS用にプレーヤーが作成する style 要素には、 id="bc-style-vjs" 属性がありましたが、 この idclass 属性に変更されました。

      以前のバージョンのプレーヤーでは、複数のプレーヤーを使用する場合、理論的には、DOM内の複数の要素がHTMLの仕様に反するidを共有する状況が発生する可能性がありました。

    その他のVideo.jsの機能および拡張機能

    変更は、VJS8に適用されます。

    • addClass および removeClass メソッドに、 foo barのように、スペースで区切られた文字列で複数のクラス名を指定できるようになりました。

    • 再生速度メニューボタンをクリックすると、再生速度メニューが表示されるようになり、他のメニューボタンと整列するようになりました。

    • 無効なイベントタイプは、ログ警告ではなく、エラーを投げるようになりました。

    その他のVHSの機能と拡張機能

    変更は、VHS3に適用されます。

    • ギャップは、スキップする前にギャップの間、待つのではなく、即座に検出されます。

    • 非推奨の smoothQualityChange メソッドを削除しました。

    • output-restricted イベント処理が発生した時の動作を改善しました。

    • excludePlaylistのパラメータをクリーンアップしました。

    • 次のような、より包括的な言語使用のために多くの名称を変更しました:

      • “master” は “main”に
      • “blacklist” は “exclude” または “excludeList”に
      • “whitelist” は “allow” または “allowList”に

    非推奨

    非推奨とは、Brightcoveが次のメジャー バージョンで行う予定の変更を指します。一般的に、これらはブラウザ コンソールに警告を記録し、開発者が統合を将来にわたって維持できるよう支援します。

    トップレベルのユーティリティ関数

    この変更は、VJS8/VHS3/BCP7に適用されます。

    時間が経つにつれ、 videojs 名前空間は、多種多様なユーティリティ関数で煩雑になってきました。 Brightcoveは、 videojs APIをよりよく整理するために、ユーティリティ オブジェクトを公開するという新しい組織原則を導入しました。

    その結果、多くのトップレベル関数が非推奨となりました。これらの各関数は、最初に使用された時に警告を記録するようになりました (ブラウザのコンソールが煩雑にならないように、一度だけです)。

    非推奨関数 代わりに次を使用
    videojs.bind ネイティブ Function.prototype.bind
    videojs.computedStyle videojs.dom.computedStyle
    videojs.createTimeRange videojs.time.createTimeRanges
    videojs.createTimeRanges videojs.time.createTimeRanges
    videojs.defineLazyProperty videojs.obj.defineLazyProperty
    videojs.formatTime videojs.time.formatTime
    videojs.isCrossOrigin videojs.url.isCrossOrigin
    videojs.mergeOptions videojs.obj.merge
    videojs.parseUrl videojs.url.parseUrl
    videojs.resetFormatTime videojs.time.resetFormatTime
    videojs.setFormatTime videojs.time.setFormatTime

    使用可能なままであるが、推奨されない古い関数もいくつかあります:

    非推奨関数 代わりに次を使用
    videojs.addClass ネイティブ videojs.dom.addClass
    videojs.appendContent videojs.dom.appendContent
    videojs.createEl videojs.dom.createEl
    videojs.emptyEl videojs.dom.emptyEl
    videojs.getAttributes videojs.dom.getAttributes
    videojs.hasClass videojs.dom.hasClass
    videojs.insertContent videojs.dom.insertContent
    videojs.isEl videojs.dom.isEl
    videojs.isTextNode videojs.dom.isTextNode
    videojs.plugin videojs.registerPlugin
    videojs.removeClass videojs.dom.removeClass
    videojs.setAttributes videojs.dom.setAttributes
    videojs.toggleClass videojs.dom.toggleClass

    サポート終了

    このセクションにあるものは、以前サポートされていたもののサポートが完全に終了していることを示します。事前に非推奨とすることなくサポートを終了することを避けるようにしておりますが、将来にわたって製品を保守し続けるためには、時にこのようなことが必要な場合がございます。ご了承下さい。

    Graphite Skin

    変更は、BCP7に適用されます。

    Graphite skin は利用出来なくなりました。

    Brightcove Player 7 がリリース時にサポートするスキンは、デフォルトの Sapphire スキンのみです。他の唯一のオプションは nullで、これはすべての CSS をオフにし、上級ユーザがゼロから独自のスキンを作成することを可能にします。

    もし、プレーヤーのJSON設定に "skin": "graphite" がある場合、それを削除して下さい。Graphite CSS に基づいてカスタマイズされたものは、更新が必要な場合があります。

    ページ内埋め込みにおけるクエリ文字列のサポート

    変更は、BCP7に適用されます。

    ページ内に埋め込まれた場合、Brightcove Player 7 は autoplay クエリパラメータ または t クエリパラメータ(またはその他のクエリ パラメータ)を認識しなくなりました。

    クエリパラメータは、iframeの埋め込みでは埋め込みコードレベルでデータを提供する理想的な方法ですが、ページ内埋め込みでは、埋め込み先のウェブサイトのURLに存在する必要があります。

    これら 2 つのパラメータは、Internet Explorer の古いバージョンで、十分にサポートされていないFullscreen API の回避策が必要であったため、サポートされていました。しかし、自社の Web ページ URL が他の目的でこれらのパラメータを含む場合、埋め込み Brightcove Player の動作に影響を及ぼし、複数のお客様に混乱を招きました。

    何らかの形でこのサポートに依存していた場合、Brightcoveは、ページ内埋め込みを autoplay または data-start-time 属性に切り替える(あるいは JavaScript コードでこの機能を実装する)ことを推奨します。

    プレイリスト関連のトップレベルの設定

    変更は、BCP7に適用されます。

    以前の player バージョンでは、複数のレガシー プレイリスト プラグイン/実装と設定方法がありました。複数のプレイリスト実装を維持することは、かなりの混乱と複雑さが生じるため、Brightcoveはプレイリスト実装を簡素化し、明確化しました。

    つまり、Brightcove Player 7 では、以下のようなトップレベルのプレイリスト関連の構成はすべてサポートされなくなりました:

    • autoadvance
    • media (プレイリストとして解釈される配列として)
    • playlist
    • repeat

    トップレベルのプレイリストの構成は、次の2つの方法で使用することができます:

    • true を使用してレガシープレイリストUI (videojs-playlist-ui)を有効にする。
    • false を使用して、プレイリストAPI (videojs-playlist)をオフにする。

    ただし、Brightcove Playlist UI プラグインには影響がありませんでした。

    移行

    プレイリストの移行経路は、常に Brightcove Playlist UI プラグインを使用することであり、これは Studio から設定可能です。従来のトップレベル設定は、Studioを通じて公開されたことはありません。

    videojs.extend() 関数

    変更は、VJS8/BCP7に適用されます。

    以前、extend() 関数は、Video.jsコンポーネントや高機能プラグインを拡張するために使用されていました。

    現在、あらゆるところでネイティブ ES6 クラスを使用しており、古い videojs.extend() 関数は単純な関数プロトタイプでしか動作しないため、Video.js 8 を構成するネイティブ ES6 クラスで使用できません。そのため、この関数は削除されました。

    例えば、 extend() を使ってコンポーネントを作成する古い方法は次の通りです:

    const Component = videojs.getComponent('Component');
    
    const MyComponent = videojs.extend(Component, {
      constructor: function(player, options) {
        Component.call(this, player, options);
      }
    });
    
    videojs.registerComponent('MyComponent', MyComponent);

    今後は、ES6クラスのみサポートされます。相当するものは次になります:

    const Component = videojs.getComponent('Component');
    
    class MyComponent extends Component {
      constructor(player, options) {
        super(player, options);
      }
    }
    
    videojs.registerComponent('MyComponent', MyComponent);

    統合コードが videojs.extend() に依存しているユーザーは、Brightcove Player 7 にアップデートする前に、実装を更新する必要があります。

    firstplay イベント

    変更は、VJS8/BCP7に適用されます。

    firstplay イベントは削除されました。これは、 play イベントが最初に発生したときに発生するレガシー イベントでした。しかし、one() メソッドを使用して、指定されたソースの最初のplay イベントにフックする、より良い方法があります:

    // Each time the source is about to change, listen for the first play event.
    player.on('sourceset', () => {
      player.one('play', callback);
    });

    その他のサポート終了

    • [BCP7] fullscreenControl および techOrder JSONコンフィグがサポートされなくなりました。代わりに、それぞれ fullscreen_controltech_order 使用して下さい。
    • [VJS8] createEl メソッドのprops引数で、aria-*roletype 属性を設定する機能を削除しました。
    • [VJS8] Flash と SWFファイルに関する残りの参照やロジックを削除しました。
    • [VJS8] CSS フレックスボックスのサポートがない場合のフォールバックを削除しました。
    • [VJS8] IE特有のコードを削除しました。

    プラグイン

    すべての Brightcove プラグインは、プレーヤの新バージョンに対応して更新されています。手動更新を行う場合、以下のリストには、 プラグイン レジストリから入手可能な新しいバージョン番号の詳細が記載されています。

    Pluginの概要 registry_id Player 6 プラグイン バージョン Player 7 プラグイン バージョン
    Adobe Analytics Player Plugin @brightcove/videojs-bc-aa 1.x 2.x
    AirPlay Support @brightcove/videojs-bc-airplay 1.x 2.x
    Google Analytics @brightcove/videojs-bc-ga 1.x 2.x
    Google Tag Manager @brightcove/videojs-bc-gtm 1.x 2.x
    Playlist Support @brightcove/videojs-bc-playlist-ui 3.x 4.x
    Tealium Analytics @brightcove/videojs-bc-tealium 1.x 2.x
    Chromecast @brightcove/
    videojs-bc-chromecast-receiver
    2.x 3.x
    Custom Endscreens @brightcove/
    videojs-bc-custom-endscreen
    3.x 4.x
    DRM Support @brightcove/videojs-bc-drm 5.x Brightcove Player 7には必要ありません
    ある場合、削除する必要があります
    FreeWheel Ads @brightcove/videojs-bc-freewheel 3.x 4.x
    Google IMA3 Ads @brightcove/videojs-bc-ima3 4.x 変更なし
    Kollective eCDN Support @brightcove/videojs-bc-kollective 1.x 2.x
    Overlays @brightcove/videojs-bc-overlay 2.x 変更なし
    Picture-in-Picture aka "Floating Player" @brightcove/videojs-bc-pip 1.x 2.x
    Playlist Endscreen @brightcove/
    videojs-bc-playlist-endscreen
    1.x 2.x
    Quality Selection Menu @brightcove/videojs-bc-quality-menu 1.x 2.x
    Social Sharing @brightcove/videojs-bc-social 3.x 4.x
    Brightcove SSAI Support @brightcove/videojs-bc-ssai 1.x 2.x
    Thumbnail Seeking @brightcove/videojs-bc-thumbnails 1.x 2.x

    ページの最終更新日14 Feb 2023