概要
Chromeを利用してYoutubeや動画を再生すると、ピクチャーインピクチャーを開くことができます
音符マークに3本線みたいなやつです
これを利用すると画面のどこかに動画を再生し続けることができるという便利な代物なのですが、Youtubeを再生している際に、今ひとつもどかしい部分が1点だけあります
それは広告ボタンがピクチャーインピクチャー内に表示されず、元のYoutubeのウィンドウにしか表示されていないということになります
広告自体は表示されるのは良いのですが、スキップするためにいちいちウィンドウの切り替えが必要になるというところが残念ポイントです
(一時期はChrome標準のピクチャーインピクチャーでも広告スキップボタンが表示されていた気もします)
これまでにも拡張機能を自作して自動でスキップボタンを押せないかなど色々模索してきました
今回はピクチャーインピクチャーのなかにスキップボタンを表示させてスキップボタンの押下を完結させようというのが試みになります
これがうまくいくようになれば、長い間悩んでいた問題にもようやく終止符が打てる気がしますので記事に整理しておきたいと思います
本題
Chrome標準のピクチャーインピクチャーではなぜスキップボタンが表示されないか
従来のPiP（Picture-in-Picture API）は、 要素の映像だけを別ウィンドウに映す仕組みです
ページ上のDOMは一切転送されず、YouTubeのスキップボタンは映像の上に重ねて描画されたHTML要素なので、ウィンドウには映らないという仕組みになります
ウィンドウに出る再生・一時停止などのボタンは、Chromeが用意した固定のUIです
つまり、ウィンドウにページ独自のボタンを出すことは、標準のものでは原理的にできません
実装内容
Chrome 116以降で使える Document Picture-in-Picture API というものを今回利用しました
これを利用すると任意のHTMLを常に前面に表示されるウィンドウへ描画できます
プレーヤーのDOMごと移動させてしまえば、スキップボタンを含む本物のコントロールがそのまま使えるようになります
実装上のポイントとしては以下になります
- プレースホルダを残す
プレーヤーを抜き出すとページのレイアウトが崩れるので、同じサイズの空要素を置いて場所を確保しています
閉じるときは replaceWith で戻すだけです
- CSSのコピー
ピクチャーインピクチャーウィンドウは別ドキュメントなので、ページのスタイルは引き継がれません
document.styleSheets を走査してコピーします
クロスオリジンのスタイルシートは cssRules へのアクセスで例外になるため、href から読み込ませるフォールバックを入れています
- サイズ追従
YouTubeのプレーヤーは内部で持っているサイズ情報に基づいて描画するため、CSSで伸縮させるだけでは足りません
resize イベントで setSize() を呼び、ウィンドウサイズに合わせ直しています
- ユーザー操作が必須
requestWindow() はユーザー操作を起点にしないと拒否されます
ボタンのクリックハンドラの中で最初に呼ぶようにしてください
非同期処理を挟んだ後だと失敗します
- SPA対策
YouTubeはページ遷移でDOMを作り直すため、ボタンの追加は定期実行にしています
yt-navigate-finish イベントを使う方法もありますが、確実さを優先しました
導入方法
過去の記事を確認いただければと思います
使い方
プレーヤーのコントロール右側に追加された「⧉」ボタンを押すと、ピクチャーインピクチャーウィンドウが開きます
中身は普段のプレーヤーそのものなので、シークバー、音量、字幕、設定、そして広告のスキップボタンまで、すべてピクチャーインピクチャー上で操作できます
閉じるときは、ピクチャーインピクチャーウィンドウの×か、もう一度「⧉」を押します
本拡張機能を利用する上での制約としては以下になります
- Chrome 116以降が必要です
- 元のタブを閉じたり、別の動画に移動したりするとピクチャーインピクチャーも終了します
- ピクチャーインピクチャーウィンドウ内での全画面表示はできません
- #movie_player や .ytp-right-controls といったセレクタに依存しているため、YouTube側の変更で動かなくなる可能性があります
- 動画の広告をブロックするものではありません。表示されたスキップボタンを押せるようにするだけです
成果物
作成した内容は以下に格納しましたので、もし個人利用したい場合は使ってみてください
おわりに
ということで、拡張機能でピクチャーインピクチャーを表示し、広告スキップボタンも表示させるという記事の紹介でした
長年の悩みが解決でき、非常に良かったです