ピクチャー・イン・ピクチャー・プラグイン("floating" or "pinned")
概要
ピクチャーインピクチャーモードでは、ユーザーがマルチタスクを実行できます。 ビデオの再生が開始されると、ユーザーがページを下にスクロールすると、ピクチャーインピクチャーモードが再配置され、 player ウェブページの隅に。
なぜそれがPicture-in-Picture
このプラグインが可能にする動作は、通常「浮動」または「固定」の動作とも呼ばれます。 Brightcove AppleとGoogleがネイティブブラウザ用にこの言葉を採用したことにより、「ピクチャインピクチャ」という用語を使用しています。 W3C 基準 また、「picture-in-picture」を参照する。
Player 例
ビデオ再生を開始します。 (停止できます)。 ページを下にスクロールして、ピクチャーインピクチャーを表示します。 player Webページの右隅にあります。 ピクチャーインピクチャーを閉じることができます player またはフルサイズまでスクロールして戻る player.
ペンを見る ピクチャー・イン・ピクチャー・プラグイン by Brightcove ラーニングサービス(@bcls1969)上 コードペン.
使用して実装 Playersモジュール
を使用してPicture-in-Pictureプラグインを実装するには Playersモジュール、次の手順に従います。
- Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
- のリンクを選択します player を開く playerのプロパティ。
- 次の項目を選択します。: プラグイン 左側のナビゲーションメニュー。
-
次に、 プラグインを追加する ボタンをクリックし、次に Brightcove プラグイン.
プラグインボタンを追加する -
拡大する Brightcove プラグイン ドロップダウンして選択 ピクチャー・イン・ピクチャー.
ピクチャーインピクチャー -
オプション:に設定オプションを入力します。 オプション(JSON) テキストボックス。 の水平方向の配置を設定する例 player ピクチャーインピクチャーモードの場合は、次のようになります。
プラグインオプション 見ます オプション 詳細についてはセクションを参照してください。
-
現在地に最も近い セットで€6 ボタン。 あなたは今見るでしょう ピクチャー・イン・ピクチャー プラグインがプラグインのリストに追加されました player.
プラグインを追加しました - 公開するには player選択 パブリッシュと埋め込み>変更の公開をクリックします。.
- 開いているダイアログを閉じるには、を選択します。 閉じる.
-
に戻る MEDIA モジュールを使用して、 player ピクチャーインピクチャー用に更新しました。
- エディターで、 player コードをWebページに埋め込みます。
-
ピクチャーインピクチャープラグインでは、 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
- ビデオの再生が開始したら、下にスクロールしてピクチャーインピクチャーを表示します player ページの下部に固定されています。
コードを使用して実装する
カスタムコードを使用してプラグインを実装するには、次のプラグインプロパティを構成します。
scripts
-JavaScriptはプラグイン用に提供されており、異なるプラグイン実装では変更されませんstylesheets
-プラグイン用に提供されたCSSであり、プラグインの実装によって変わることはありませんplugin name
- 常に ピップplugin options
- プロパティと値の配列を含む
プラグインをコードに追加するには、次の手順に従います。
- picture-in-pictureプラグインのスタイルを追加します。
<link href="https://players.brightcove.net/videojs-pip/1/videojs-pip.css" rel="stylesheet">
- 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>
-
を包む 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
- 次のようなカスタムスクリプトコードを追加します。
- 時 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(); });
詳細については、 コードペンの例 上記。
- 時 player 準備ができて、への参照を取得します Brightcove Player。 この例では、次の名前の変数を作成しています
オプション
初期化時にオプションオブジェクトをプラグインに渡すことができます。 このオブジェクトには、次のいずれかのオプションが含まれます。
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つあります。
- In Studio's PLAYERS>プラグイン の項目を検索します。
- 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プラグインが無効になった後に起動します。 |
変更履歴
見ます 変更履歴はこちら.