ピクチャーインピクチャープラグイン（別名「フローティング」または「ピン留め」）

概要

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

なぜそれがPicture-in-Picture

このプラグインが可能にする動作は、通常「浮動」または「固定」の動作とも呼ばれます。 Brightcove AppleとGoogleがネイティブブラウザ用にこの言葉を採用したことにより、「ピクチャインピクチャ」という用語を使用しています。 W3C 基準 また、「picture-in-picture」を参照する。

Player 例

ビデオ再生を開始します。 （停止できます）。 ページを下にスクロールして、ピクチャーインピクチャーを表示します。 player Webページの右隅にあります。 ピクチャーインピクチャーを閉じることができます player またはフルサイズまでスクロールして戻る player.

ペンを見る ピクチャー・イン・ピクチャー・プラグイン by Brightcove ラーニングサービス（@bcls1969）上 コードペン.

使用して実装 Playersモジュール

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

1. Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
2. のリンクを選択します player を開く playerのプロパティ。
3. 次の項目を選択します： プラグイン 左側のナビゲーションメニュー。

4. 次に、 プラグインを追加する ボタンをクリックし、次に Brightcove プラグイン.

   

5. 拡大する Brightcove プラグイン ドロップダウンして選択 ピクチャー・イン・ピクチャー.

   

6. 各種オプション：に設定オプションを入力します。 オプション（JSON） テキストボックス。 の水平方向の配置を設定する例 player ピクチャーインピクチャーモードの場合は、次のようになります。

   

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

7. 現在地に最も近い 保存 ボタン。 あなたは今見るでしょう ピクチャー・イン・ピクチャー プラグインがプラグインのリストに追加されました player.

   

8. 公開するには player選択 公開と埋め込み>変更の公開.
9. 開いているダイアログを閉じるには、を選択します。 閉じる.

10. に戻る MEDIA モジュールを使用して、 player ピクチャーインピクチャー用に更新しました。

11. エディターで、 player コードをWebページに埋め込みます。

12. ピクチャーインピクチャープラグインでは、 player クラスがに設定されたコンテナ要素によってラップされます 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> 上記の要素がの親として見つかりません player、プラグインは初期化に失敗し、次のログ警告が表示されます。

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

13. ビデオの再生が開始したら、下にスクロールしてピクチャーインピクチャーを表示します player ページの下部に固定されています。

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

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

• scripts -JavaScriptはプラグイン用に提供されており、異なるプラグイン実装では変更されません
• stylesheets -プラグイン用に提供されたCSSであり、プラグインの実装によって変わることはありません
• plugin name - 常に ピップ
• plugin options - プロパティと値の配列を含む

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

1. picture-in-pictureプラグインのスタイルを追加します。

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

2. picture-in-pictureプラグインを含めるための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. を包む player クラスが設定されたコンテナ要素にコードを埋め込む vjs-pip-container。 ピクチャーインピクチャープラグインでは、 player このコンテナ要素によってラップされます。

   <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> 上記の要素がの親として見つかりません player、プラグインは初期化に失敗し、次のログ警告が表示されます。

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

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

   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();
   });

   詳細については、 コードペンの例 上記。

オプション

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

allowOnMobile

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

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

    サポートされているモバイルデバイスでピクチャインピクチャを有効にしたい場合は、このオプションを使用して有効にできます。 サポートを有効にしたい場合がいくつかあります。

    • インテグレーターは、ピクチャーインピクチャーの位置を管理する責任を負うことをいとわない player モード。
    • を使用するウェブサイト player ズームされる可能性はほとんどありません。
    • ズームを無効にしました。 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 の右上隅にあるボタン player。 この機能は、 false このオプションの。

  • 例：

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

階段

• scale:
  • タイプ： number
  • デフォルト： 2 / 3
  • に適用されるスケーリング係数 player ピクチャーインピクチャーモードの場合。 この値は、1より大きくXNUMX以下の数値でなければなりません。

  • 例：

    // 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

  • デフォルトでは、プラグインは playerによって決定される係数によるの寸法 scale オプション。 ただし、 height （または width）デフォルトのスケーリングを上書きし、縮小されたサイズを設定します player 明示的に

    XNUMXつの次元のみが指定されている場合、縦横比を維持するためにもうXNUMXつの次元が縮小されます。 両方のディメンションが提供されている場合、 player 正確な指定サイズに設定されます-アスペクト比の変更を許可します。

  • 例：

    // 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"

  • の水平方向の配置 player ピクチャーインピクチャーモードの場合-「右」または「左」。

  • 例：

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

posY

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

  • の垂直方向の配置 player ピクチャーインピクチャーモードの場合-「上」または「下」。

  • 例：

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

閲覧可能

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

  • しきい値 player 視認可能と見なされます。 つまり、この合計の割合が player 領域（高さと幅）はブラウザのビューポートに表示され、表示可能と見なされます。

    たとえば、デフォルトの0.8では、 player 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

  • デフォルトでは、 player このプラグインを有効にすると、特別なコンテナ要素の物理的な寸法が playerの寸法。 ただし、この動作はすべてのユースケースで機能するわけではないため、このオプションを次のように設定することで無効にできます true.

    そうするとき、コンテナ要素は通常のブロック要素のように振る舞います。 これは、プラグインのユーザーが独自にサイズを管理する必要があることを意味します。

    このオプションは、booleanを使用して埋め込みコードに設定することもできます 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. In Studio's PLAYERS>プラグイン の項目を検索します。
2. JavaScriptを player.

使い方 Studio

In Studio、編集 player に戻る プラグイン セクション。 名前リストの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);
});

メソッド

次の方法で、ピクチャインピクチャプラグインと対話できます。

イベント

picture-in-pictureプラグインから次のイベントが発生します。

変更履歴

見ます 変更履歴はこちら.