ピクチャーインピクチャプラグイン (「フローティング」または「固定」)

概要

ピクチャ・イン・ピクチャモードでは、ユーザーはマルチタスクを実行できます。ビデオの再生が開始されると、ユーザーがページを下にスクロールすると、ピクチャーインピクチャーモードが再配置され、プレーヤーがWebページの隅に固定されます。

ピクチャーインピクチャーと呼ばれる理由

このプラグインで有効にする動作は、一般に「フローティング」または「固定」動作とも呼ばれます。ブライトコーブでは、Apple と Google がネイティブブラウザにこの言葉を採用しているため、「ピクチャーインピクチャ」という用語を使用しています。W3C 基準「ピクチャーインピクチャー」も参照してください。

Brightcove プラグインとネイティブ機能

最近のほとんどのブラウザには、ピクチャインピクチャ機能が含まれています。このセクションでは、Brightcove Beacon プラグインとネイティブ機能の違いについて説明します。これには、ネイティブ機能をオフにしてプラグインをプレイヤーに追加したい理由が続きます。

ネイティブブラウザ機能

ネイティブブラウザーのピクチャーインピクチャの機能については、以下で詳しく説明します。

• 機能を有効にするために何もする必要はありません。ピクチャインピクチャのアイコンがコントロールバーに表示されます。
• アイコンボタンはトグルとして機能し、ビューアーは機能のオンとオフを切り替えます。
• ネイティブのピクチャーインピクチャ機能は、まったく新しいブラウザ/OS ウィンドウでブラウザプレーヤーを開きます。ブラウザプレーヤーは、起動した Web ページとは無関係に制御できます。したがって、ピクチャーインピクチャープレーヤーはブラウザによって制限されません。ピクチャーインピクチャープレーヤーは、ブラウザのサイズに関係なく、画面の右下に表示されます。
• ネイティブピクチャーインピクチャー機能がオンになっていると、Brightcove Playerの動画は「グレー表示」されます。

それがどのように機能するのか見て

使用中のネイティブ実装については、このビデオをご覧ください。

機能をオフにする

ネイティブブラウザ機能をオフにする場合は、Video Cloud Studioを使用して、プレーヤー構成に次のJSONコード行を配置します。 JSONエディター：

"picture_in_picture_control": false,

ブライトコーブのプラグイン

Brightcove Playerピクチャーインピクチャープラグインの機能の詳細については、次のとおりです。

• プラグインをインストールすると、ビューアーはピクチャーインピクチャープレーヤーを起動するためのアクションを実行する必要はありません。ただし、Brightcove Playerのスクロールはほとんど表示されなくなります。ピクチャーインピクチャをオンにするボタンはありません。
• ビューアーがBrightcove Playerをスクロールして表示に戻ると、ピクチャインピクチャープレーヤーは自動的に消えます。
• ピクチャーインピクチャープレーヤーは、ブラウザの右下隅に表示されます（デフォルト）。ネイティブ機能とは異なり、プラグインはブラウザによって制限されています。

それがどのように機能するのか見て

このビデオでは、Brightcove Player プラグインの実装が使用されている様子をご覧ください。

Brightcove Playerプラグインを使用する理由

ネイティブ機能が組み込まれていて、何もする必要はありません。なぜネイティブ機能をオフにして Brightcove Player プラグインをインストールしたいですか？以下はその理由の一部です。

• ネイティブプレーヤーはクライアントサイド広告を再生しません。SSAI 広告は再生されますが、Brightcove Player が行うUIのカスタマイズは提供されず、ユーザーがそれらの広告をスルー/オーバーシークすることを妨げることはありません。
• ピクチャインピクチャ機能をブラウザによって制限する必要があります。ピクチャーインピクチャープレーヤーをブラウザの不動産の外に配置したくありません。
• ユーザー操作なしで機能を有効にしたいとします。
• プラグインは、より簡単に実装できるカスタマイズを提供します。プラグインで使用できるオプション、メソッド、イベントについては、このドキュメントの末尾付近にリストされています。

プレーヤーの例

ビデオの再生を開始します。（その後、それを止めることができます）。ページを下にスクロールすると、Web ページの右隅にピクチャインピクチャプレーヤーが表示されます。Picture-in-Picture プレーヤーを閉じるか、フルサイズのプレーヤーまでスクロールし直すことができます。

ペンを見るピクチャーインピクチャープラグイン Brightcove Learning Services（ @ bcls1969） オンCodePen。

プレーヤーモジュールを使用して実装する

Players モジュールを使用して Picture-in-Picture  プラグインを実装するには、次の手順に従います。

1. を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
2. プレーヤーのリンクを選択して、プレイヤーのプロパティを開きます。
3. 左側のナビゲーションメニューで [ プラグイン ] を選択します。

4. 次に、[ プラグインを追加]ボタンを選択し、[ ブライトコーブプラグイン] を選択します。

   

5. を展開しますBrightcoveプラグインドロップダウンして選択しますピクチャーインピクチャー。

   

6. オプション :[ オプション (JSON)] テキストボックスに構成オプションを入力します。ピクチャーインピクチャーモードのプレーヤーの水平方向の配置を設定する例を次に示します。

   

   詳細については、オプションのセクションを参照してください。

7. [ 保存] ボタンを選択します。

8. これで、ピクチャーインピクチャープレーヤーのプラグインのリストにプラグインが追加されました。

   

9. プレーヤーを公開するには、[ 公開と埋め込み] > [変更を公開] を選択します。
10. 開くダイアログを閉じるには、[ 閉じる] を選択します。

11. MEDIA モジュールに戻り、Picture-in-Picture 用に更新したばかりのプレーヤーを使用してビデオを公開します。

12. エディターで、プレーヤーの埋め込みコードを Web ページにコピーします。

13. ピクチャインピクチャプラグインでは、プレイヤーがクラスをに設定したコンテナ要素によってラップされている必要がありますvjs-pip-container。コードは次のようになります。

    <div class="vjs-pip-container">
      <video-js id="myPlayerID"
        data-video-id="5701202551001"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        class="video-js"
        width="640" height="360"
        controls></video-js>
      <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    </div>

    <div>上記の要素がプレイヤーの親として見つからない場合、プラグインは初期化に失敗し、次のログ警告が表示されます。

    VIDEOJS: WARN: expected player to be a child of a "vjs-pip-container" element, cannot continue with picture-in-picture plugin

14. ビデオの再生が開始されたら、下にスクロールして、ページの下部に固定されたピクチャインピクチャプレーヤーを確認します。

コードを使用して実装する

カスタムコードを使用してプラグインを実装するには、次のプラグインプロパティを設定します。

• scripts - JavaScript supplied for the plugin and will not change for different plugin implementations
• stylesheets -CSSはプラグインのために提供され、異なるプラグインの実装では変更されません
• plugin name - いつもピップ
• plugin options - Contains an array of properties and values

プラグインをコードに追加するには、次の手順を実行します。

1. ピクチャインピクチャプラグインのスタイルを追加します。

   <link href="https://players.brightcove.net/videojs-pip/1/videojs-pip.css" rel="stylesheet">

2. ピクチャインピクチャプラグインを含めるには、JavaScript ファイルを追加します。

   <video-js id="myPlayerID"
     data-video-id="5701202551001"
     data-account="1752604059001"
     data-player="default"
     data-embed="default"
     class="video-js"
     width="640" height="360"
     controls></video-js>
   <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
   
   <!-- Script for the picture-in-picture plugin -->
   <script src="https://players.brightcove.net/videojs-pip/1/videojs-pip.min.js"></script>

3. クラスをに設定して、vjs-pip-containerコンテナ要素にプレーヤー埋め込みコードをラップします。ピクチャーインピクチャプラグインでは、プレーヤーがこのコンテナ要素でラップされている必要があります。

   <div class="vjs-pip-container">
       <video-js id="myPlayerID"
         data-video-id="5701202551001"
         data-account="1752604059001"
         data-player="default"
         data-embed="default"
         class="video-js"
         width="640" height="360"
         controls></video-js>
       <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
     </div>
   
           <!-- Script for the picture-in-picture plugin -->
           <script src="https://players.brightcove.net/videojs-pip/1/videojs-pip.min.js"></script>

   <div>上記の要素がプレーヤーの親として見つからない場合、プラグインは初期化に失敗し、次のログ警告が表示されます。

   expected player to be a child of a "vjs-pip-container" element, cannot continue with picture-in-picture plugin

4. 次のことを実行するカスタムスクリプトコードを追加します。
   • プレーヤーの準備ができたら、Brightcove プレーヤーへの参照を取得します。この例では、myPlayerという名前の変数を作成し、プレーヤーへの参照を割り当てます。
   • ピクチャインピクチャプラグインを初期化します。

   videojs.getPlayer('myPlayerID').ready(function() {
     // When the player is ready, get a reference to it
     var myPlayer = this;
     // Initialize the picture-in-picture plugin
     myPlayer.pip();
   });

   詳細については、上記のコードペンの例を参照してください。

オプション

初期化時に options オブジェクトをプラグインに渡すことができます。このオブジェクトには、次のいずれかのオプションを含めることができます。

AllowonMobile

• allowOnMobile :
  • タイプ: boolean
  • デフォルト: false

  • デフォルトでは、ピクチャインピクチャモードは Android または iOS モバイルデバイスでは機能しません。これは、これらのCSS固定位置は、デスクトップデバイスと同じ方法で、複数のビューポートを持つズーム可能なデバイスでは機能しないためです。

    サポートされているモバイルデバイスで Picture-in-Picture を有効にするには、このオプションを使用します。サポートを有効にしたい場合があります。

    • インテグレーターは、ピクチャー・イン・ピクチャー・プレイヤー・モードのポジショニングの管理を担当します。
    • プレーヤーを使用しているウェブサイトがズームされることはほとんどありません。
    • user-scalable=noディレクティブを使用してズームが無効になりました。このディレクティブを使用すると、position: fixedデスクトップと同じように動作しますが、アクセシビリティの問題になる可能性があるため、特に推奨されません。

      <meta name="viewport" content="width=device-width, user-scalable=no">

  • 例:

    // Allow mobile (iOS and Android) devices to enter PIP mode.
    player.pip({allowOnMobile: true});

クローズ可能

• closeable :
  • タイプ: boolean
  • デフォルト: true
  • デフォルトでは、プレーヤーの右上隅にある [ X] ボタンをクリックすると、ピクチャインピクチャモードを無効にすることができます。falseこのオプションを渡すと、この機能を無効にすることができます。

  • 例:

    // Do not allow the user to close the PIP mode player.
    player.pip({closeable: false});

スケール

• scale :
  • タイプ: number
  • デフォルト: 2 / 3
  • ピクチャインピクチャモードのときにプレーヤーに適用されるスケーリング係数です。この値は、0 より大きく 1 以下の数値である必要があります。

  • 例:

    // Detach the player, but do not change its size.
    player.pip({scale: 1});

  • 例 2:

    // Detach the player, and change its size to 1/2.
    player.pip({scale: 0.5});

高さと幅

• heightとwidth :
  • タイプ: number
  • デフォルト: null

  • デフォルトでは、scaleプラグインはオプションによって決定される係数によってプレーヤーの寸法をスケールダウンします。ただし、height (またはwidth ) を指定するとデフォルトのスケーリングが上書きされ、スケールダウンされたプレーヤーのサイズが明示的に設定されます。

    1 つの寸法のみを指定した場合、もう一方の寸法は縦横比を維持するために縮小されます。両方の寸法が指定されている場合、プレーヤーは正確な指定されたサイズに設定され、アスペクト比を変更できます。

  • 例:

    // Detach the player and set its width to 300 pixels. Scale its height to
    // maintain its current aspect ratio.
    player.pip({width: 300});

POSX

• posX :
  • タイプ: string
  • デフォルト: "right"

  • ピクチャーインピクチャモードでのプレーヤーの水平方向の配置 (「右」または「左」のいずれか)。

  • 例:

    // When the player is in PIP mode, align it to the left side of the viewport.
    player.pip({posX: 'left'});

posy

• posY :
  • タイプ: string
  • デフォルト: "bottom"

  • ピクチャーインピクチャモードでのプレーヤーの垂直方向の配置 (「上」または「下」)。

  • 例:

    // When the player is in PIP mode, align it to the top of the viewport.
    player.pip({posY: 'top'});

表示可能

• viewable :
  • タイプ: number
  • デフォルト: 0.8

  • プレーヤーが閲覧可能と見なされるしきい値。つまり、プレーヤの総領域（高さと幅）のこのパーセンテージがブラウザのビューポートに表示されている場合、それは表示可能とみなされます。

    たとえば、既定値の 0.8 では、プレーヤーの 80% がビューポートに表示されない限り、プレーヤは表示可能とは見なされません。viewable値は 0 以上で 1 以下の数値である必要があります。

  • 例:

    // If more than half the player is outside of the viewport, activate PIP mode.
    player.pip({viewable: 0.5});

ManualContainerSize

• manualContainerSize :
  • タイプ: boolean
  • デフォルト: false

  • デフォルトでは、このプラグインを有効にしたプレーヤーは、特別なコンテナ要素の物理的な寸法とプレーヤーの寸法の同期を維持します。ただし、この動作はすべてのユースケースで機能するとは限りません。そのため、このオプションをに設定することで無効にできますtrue。

    そうすると、コンテナ要素は通常のブロック要素のように動作します。つまり、プラグインのユーザーは自分でサイズを管理する必要があります。

    このオプションは、data-manual-container-sizeコンテナのブール属性を使用して埋め込みコードで設定することもできます。その存在は、このオプションをtrueに設定します。プラグインに渡される値は、埋め込みコードで定義されている値よりも優先されます。

  • 例:

    // Implementation will handle sizing the container.
    player.pip({manualContainerSize: true});

  • data-manual-container-sizeコンテナのアトリビュートを使用する例:

    <div class="vjs-pip-container" data-manual-container-size>
      <video-js class="video-js vjs-default-skin">
      </video-js>
    </div>

オプションの使用

オプションを利用するには、次の 2 つの方法があります。

1. Studio の「プレーヤー」>「プラグイン」セクションにあります。
2. プレイヤーで JavaScript を使用する。

スタジオを使用する

Studio で、プレーヤーを編集し、[ プラグイン ] セクションに戻ります。名前一覧の Picture-in-Picture をクリックします。適切な JSON 形式を使用して、オプションを (引用符で囲んで) リストし、その後に適切な値を記述します。値が文字列の場合は、引用符で囲む必要があります。数値またはブール値の場合、引用符を含めることはできません。

JavaScriptを使う

コードにオプションを実装するには、オブジェクトを作成し、必要なオプションにそれぞれの値を割り当てて、プラグインを呼び出すときに options オブジェクトを渡します。

videojs.getPlayer('myPlayerID').ready(function() {
  // When the player is ready, get a reference to it
  var myPlayer = this,
      options = {};

  options.scale = 0.5;
  options.posX = "left";
  // Initialize the picture-in-picture plugin
  myPlayer.pip(options);
});

メソッド

次のメソッドを使用すると、ピクチャインピクチャプラグインと対話できます。

イベント

ピクチャインピクチャプラグインから次のイベントが発生します。

更新履歴

ピクチャーインピクチャープラグインのリリースノートを参照してください。

過去のリリースノートについては、ここの changelog を参照してください。