2017 年 4 月以降、Android O 版 Chrome ではピクチャー イン ピクチャーをサポートしています。ユーザーは、他のウィンドウでブロックされない小さなオーバーレイ ウィンドウで <video>
要素を再生できるため、他の作業をしながら視聴できるようになります。
仕組みとしては、Chrome を開き、動画を含むウェブサイトに移動して全画面表示で再生します。そこから、ホームボタンを押して Android のホーム画面に移動すると、再生中の動画が自動的にピクチャー イン ピクチャーに移行します。これで完了です。これはとても便利です。
もちろん重要ですが、パソコンではどうすればよいでしょうか。ウェブサイトでそのエクスペリエンスを制御したい場合、どうしたらよいでしょうか。
幸いなことに、Picture-in-Picture Web API の仕様が現在も草案中です。この仕様は、以下のプロパティ セットを API に公開することで、ウェブサイトでこの動作を開始し、制御できるようにすることを目的としています。
- 動画がピクチャー イン ピクチャー モードを開始、終了したときにウェブサイトに通知します。
- ウェブサイトがユーザー操作を介して動画要素でピクチャー イン ピクチャーをトリガーすることを許可します。
- ウェブサイトがピクチャー イン ピクチャーを終了することを許可します。
- ピクチャー イン ピクチャーをトリガーできるかどうかの確認をウェブサイトに許可します。
次のように表示されます。
<video id="video" src="https://example.com/file.mp4"></video>
<button id="pipButton"></button>
<script>
// Hide button if Picture-in-Picture is not supported.
pipButton.hidden = !document.pictureInPictureEnabled;
pipButton.addEventListener('click', function() {
// If there is no element in Picture-in-Picture yet, let's request Picture
// In Picture for the video, otherwise leave it.
if (!document.pictureInPictureElement) {
video.requestPictureInPicture()
.catch(error => {
// Video failed to enter Picture-in-Picture mode.
});
} else {
document.exitPictureInPicture()
.catch(error => {
// Video failed to leave Picture-in-Picture mode.
});
}
});
</script>
フィードバック
いかがでしょうか?ピクチャー イン ピクチャー WICG リポジトリから、フィードバックや問題をお送りください。ご意見、ご感想をお待ちしています
Android のデフォルトの PIP 動作が行われないようにする
現在は、サイズ変更イベントに応答し、ウィンドウ サイズが大幅に変化したことを検出することで、Chrome で Android のデフォルトの PIP 動作が動画で使用されないようにすることができます(以下のコードを参照)。これは永続的なソリューションとしておすすめしませんが、ウェブ API が実装されるまでの一時的な選択肢です。
// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
if (!document.fullscreenElement) {
return;
}
var minimumScreenSize = 0.33;
var screenArea = screen.width * screen.height;
var windowArea = window.outerHeight * window.outerWidth;
// If the size of the window relative to the screen is less than a third,
// let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
if ((windowArea / screenArea) < minimumScreenSize) {
document.exitFullscreen();
}
});