概要
ピクチャ・イン・ピクチャモードでは、ユーザーはマルチタスクを実行できます。ビデオの再生が開始されると、ユーザーがページを下にスクロールすると、ピクチャーインピクチャーモードが再配置され、プレーヤーが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 プラグインを実装するには、次の手順に従います。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクを選択して、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ プラグイン ] を選択します。
-
次に、[ プラグインを追加]ボタンを選択し、[ ブライトコーブプラグイン] を選択します。
-
を展開しますBrightcoveプラグインドロップダウンして選択しますピクチャーインピクチャー。
-
オプション :[ オプション (JSON)] テキストボックスに構成オプションを入力します。ピクチャーインピクチャーモードのプレーヤーの水平方向の配置を設定する例を次に示します。
- [ 保存] ボタンを選択します。
-
これで、ピクチャーインピクチャープレーヤーのプラグインのリストにプラグインが追加されました。
- プレーヤーを公開するには、[ 公開と埋め込み] > [変更を公開] を選択します。
- 開くダイアログを閉じるには、[ 閉じる] を選択します。
-
MEDIA モジュールに戻り、Picture-in-Picture 用に更新したばかりのプレーヤーを使用してビデオを公開します。
- エディターで、プレーヤーの埋め込みコードを Web ページにコピーします。
-
ピクチャインピクチャプラグインでは、プレイヤーがクラスをに設定したコンテナ要素によってラップされている必要があります
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
- ビデオの再生が開始されたら、下にスクロールして、ページの下部に固定されたピクチャインピクチャプレーヤーを確認します。
コードを使用して実装する
カスタムコードを使用してプラグインを実装するには、次のプラグインプロパティを設定します。
scripts
- JavaScript supplied for the plugin and will not change for different plugin implementationsstylesheets
-CSSはプラグインのために提供され、異なるプラグインの実装では変更されませんplugin name
- いつもピップplugin options
- Contains an array of properties and values
プラグインをコードに追加するには、次の手順を実行します。
- ピクチャインピクチャプラグインのスタイルを追加します。
<link href="https://players.brightcove.net/videojs-pip/1/videojs-pip.css" rel="stylesheet">
- ピクチャインピクチャプラグインを含めるには、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>
-
クラスをに設定して、
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
- 次のことを実行するカスタムスクリプトコードを追加します。
- プレーヤーの準備ができたら、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(); });
- プレーヤーの準備ができたら、Brightcove プレーヤーへの参照を取得します。この例では、
オプション
初期化時に 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 つの方法があります。
- Studio の「プレーヤー」>「プラグイン」セクションにあります。
- プレイヤーで 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);
});
メソッド
次のメソッドを使用すると、ピクチャインピクチャプラグインと対話できます。
方法 | 説明 |
---|---|
myPlayer.pip().enable() |
ピクチャインピクチャの自動動作を有効にする |
myPlayer.pip().disable() |
ピクチャインピクチャの自動動作を無効にする |
myPlayer.pip().toggle() |
現在の状態に基づいて、ピクチャインピクチャモードを手動で有効または無効にする |
myPlayer.pip().activate() |
手動でプレイヤーをピクチャー・イン・ピクチャーモードにする |
myPlayer.pip().deactivate() |
手動でプレーヤーをピクチャーインピクチャモードから解除する |
イベント
ピクチャインピクチャプラグインから次のイベントが発生します。
イベント | 説明 |
---|---|
beforepipactive |
ピップモードがアクティブになる前に発火 |
pipactive |
ピップモードがアクティブになった後に発火 |
beforepipinactive |
ピップモードが非アクティブになる前に発火 |
pipinactive |
ピップモードが非アクティブになった後に発火 |
beforepipenabled |
videojs-pipプラグインが有効になる前に火災 |
pipenabled |
videojs-pipプラグインが有効になった後に火災 |
beforepipdisabled |
videojs-pipプラグインが無効になる前に火災 |
pipdisabled |
videojs-pipプラグインが無効になった後に火災 |
更新履歴
ピクチャーインピクチャープラグインのリリースノートを参照してください。
過去のリリースノートについては、ここの changelog を参照してください。