Google Chrome v69でYouTubeなどのvideo要素をPicture-in-Picture再生する方法。

　Google Chrome v69でYouTube動画などのPicture-in-Picture再生を利用する方法です。詳細は以下から。

　Googleは現地時間2018年09月04日、Chromeブラウザ・リリース10周年のアイバーサリーエディションとなる「Google Chrome v69」をリリースしましたが、同バージョンではGoogle Chrome Canary v68でサポートされていたYouTubeなどのvideo要素をフローティング・ウィンドウで再生するPicture-in-Picture (PiP)機能が実験的に利用できるようになっています。

The Picture-in-Picture API allows websites to create a floating video window that is always on top of other windows so that users may continue consuming media while they interact with other sites or applications on their device. This change only applies to <video> elements.

Picture-in-Picture (PiP) – Chrome Platform Status

PinP機能の使用法

　Chrome v69でPinP機能を利用する方法は以前より簡単になっており、アドレスバー(Omnibox)を利用して以下のフラグを有効[Enable]にするだけで、

• chrome://flags/#enable-surfaces-for-videos
• chrome://flags/#enable-picture-in-picture

後はvideo要素のあるページを開き、コンテキストメニューから[ピクチャー イン ピクチャー]を選択するだけで、フローティング・ウィンドウでvideo要素が再生されます。

注意点

　Chrome Platform Statusによると、Picture-in-Picture機能は現在Draft段階で字幕やコントローラーがフローティング・ウィンドウに移らないといった不具合もあるようで、

YouTubeなどコンテキストメニュー(右クリック)で独自コントローラーを表示するアプリはChrome Teamが公開している「Picture-in-Picture Chrome Extension」をインストールしてメニューバーの機能拡張アイコンから実行しなければいけないので、利用される方は以下のリンクをチェックしてみてください。

追記

　YouTubeの場合はvideo要素を右クリックしてコントローラーを出したあと、もう一度右クリックすることで通常のコンテキストメニューが表示され、ここから[ピクチャー イン ピクチャー]を選択することが出来ました。(コメント欄でのご指摘ありがとうございます)

• Picture-in-Picture – Chrome ウェブストア
• Picture-in-Picture (PiP) – Chrome Platform Status