iPhone Safari で YouTube を PiP (ピクチャ・イン・ピクチャ) 再生する方法
iOS 14 には PiP (ピクチャ・イン・ピクチャ) で動画を再生できる機能がある。当初 YouTube では PiP 再生ができたのだが、すぐに対策されてしまい、現在は PiP 再生しようとすると一時停止してしまうようになっている。
- iosアプリ版YouTubeのPIP(ピクチャインピクチャ)について。 - YouTube Community
- iOS14 : YouTube(無料会員)でPIP再生する手順。プレミアム不要でピクチャ・イン・ピクチャ | スマホサポートライン
今回、コレを回避する方法を見つけたので紹介する。
PiP 再生の制御は WebKit 用の JS コードを書くことで行える。大まかなコードは以下が参考になるだろう。
で、次のような文献を見つけた。
let v = document.querySelector('video');
v.addEventListener('webkitpresentationmodechanged', (e)=>e.stopPropagation(), true);
setTimeout(()=>v.webkitSetPresentationMode('picture-in-picture'), 3000);
completion();
こんなコードを iOS ショートカットから実行すれば、PiP に出来るそうだ。
ならばと、次のようなブックマークレットを作ってみた。
PiP モードで再生する
iOS Safari で YouTube の動画ページを開いている状態で、次のブックマークレットを実行する。すると、再生中の動画が PiP で再生され、ホーム画面上に動画が浮いて表示されるようになる。
javascript:(v=>{v=document.querySelector('video');v.addEventListener('webkitpresentationmodechanged',e=>e.stopPropagation(),true);setTimeout(()=>v.webkitSetPresentationMode('picture-in-picture'),1000);})();
PiP モードを有効にできるようにする
上のコードは必ず PiP モードに移行してしまうが、PiP モードでの移行は後で手動で行いたい、という場合は、以下のコードだけ実行する。このブックマークレットを実行した後に、動画をフルスクリーン表示にして、そこに表示されるコントローラから PiP モードを選択すると、コレまで封じられていた PiP モードでの再生続行が可能になっている。
javascript:(()=>document.querySelector('video').addEventListener('webkitpresentationmodechanged',e=>e.stopPropagation(),true))();
推測だが、どうやら YouTube は webkitpresentationmodechanged というイベントで PiP になったかどうかを判定して、PiP モードになった場合はそれをキャンセルするようなコードを実行しているっぽい。これらのブックマークレットは、そのイベントに割り込んでイベントの伝播を抑止 (stopPropagation()) することで、YouTube が封じた処理を回避している。
1つ目のコードでは、video DOM 要素に独自に追加されている webkitSetPresentationMode() メソッドで、PiP モードで再生するよう強制している。
ブックマークレットや iOS ショートカットは都度実行が必要になるが、とりあえずのワークアラウンドとして。
