サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

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

    このトピックでは、ピクチャーインピクチャープラグインを使ってこのモードを有効にする方法を学びます。 Brightcove Player.

    概要

    ピクチャーインピクチャーモードでは、ユーザーがマルチタスクを実行できます。 ビデオの再生が開始されると、ユーザーがページを下にスクロールすると、ピクチャーインピクチャーモードが再配置され、 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});

    高さと幅

    • heightwidth:
      • タイプ: 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);
    });

    メソッド

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

    方法 説明
    myPlayer.pip().enable() 自動ピクチャインピクチャの動作を有効にする
    myPlayer.pip().disable() 自動ピクチャインピクチャビヘイビアを無効にする
    myPlayer.pip().toggle() 現在の状態に基づいてピクチャインピクチャモードを手動で有効または無効にする
    myPlayer.pip().activate() 手動で player ピクチャーインピクチャーモードに
    myPlayer.pip().deactivate() 手動で player ピクチャーインピクチャーモードから

    イベント

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

    イベント 説明
    beforepipactive ピップモードが起動する前に発火する
    pipactive ピップモードが起動した後の発火
    beforepipinactive ピップモードが解除される前の火災
    pipinactive ピップモード後の火災は無効になります
    beforepipenabled videojs-pipプラグインが有効になる前に起動します。
    pipenabled videojs-pipプラグインが有効になった後に起動します。
    beforepipdisabled videojs-pipプラグインが無効になる前に起動します。
    pipdisabled videojs-pipプラグインが無効になった後に起動します。

    変更履歴

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


    ページの最終更新日:28年2020月XNUMX日