日記

日本語の勉強のためのブログ

AbemaビデオでPIPを利用できるようにするブックマークレット

※2022年9月現在のAbemaの仕様に基づいて作成したため、仕様変更に伴い使用不可になる可能性がある。

1. はじめに

Abemaビデオで無料公開されているアニメを見ることがあるのだが、YouTube等と異なりピクチャーインピクチャー(以下、PIPと呼ぶ)に対応していないため、困ることがある。
そこで、ページ要素を強引に削除することでPIP対応させるブックマークレットを作成した。

2. 作成したブックマークレット

開発者ツールを用いて要素を削除していき、都度PIPが使えるか調べる、という流れで削除すべき要素を探した。そしてその要素を除去するためのjavascriptコードを書き、ブックマークレットに整形した。
結構昔に作ったため、詳細は思い出せないが…

javascript:(function(){document.getElementsByClassName("com-vod-VODScreen-video-cover")[0].remove();document.querySelector("div.com-vod-VODScreen__player>div>div>video:nth-child(3)").style["pointerEvents"] = "";})();

2022/12/03 追記

久しぶりに使ったらうまく動かなかったので修正。

javascript:(function(){document.querySelector("div.com-vod-VODScreen__player > div > div > div:nth-child(5)").remove();document.getElementsByClassName("com-vod-VODScreen-video-cover")[0].remove();document.querySelector("div.com-vod-VODScreen__player>div>div>video:nth-child(3)").style["pointerEvents"] = "";})();

2023/03/27追記: 数日前から,PIPウィンドウの停止ボタンやシークバーを操作すると,勝手にPIPが解除されるようになってしまった.これを回避するには,動画を停止したり巻き戻したりする際に元ウィンドウの(Abemaの)プレイヤーで操作する必要がある(下図参照).

図1. 各ウィンドウの図解

3. 使用上の注意

このブックマークレットを使用すると、ビデオを最後まで閲覧した際、ページ全体が真っ黒になってしまい動作しなくなるという問題が生じる。
ページを再読み込みすれば直る上に、発生するのも動画の最後なのでそれほど困ることはないと思う。
逆に言えば、ビデオを最後まで再生しなければ問題ない。例えば30分のビデオなら29分59秒あたりで停止すれば回避できる。