やりたいこと
- abemaビデオでyoutubeみたくPinP表示したい。 参考:PC版Chromeがピクチャ・イン・ピクチャに正式対応。
- 調べたら、videoタグで
.requestPictureInPicture()を叩けば出来そうなことが分かった。 参考:Picture-in-Picture - 頑張らない。
出来たもの
javascript:document.querySelector("#main > div > main > div > div.c-video-EpisodeContainer-thumbnail.c-vod-PlayerContainer-container.c-vod-PlayerContainer-inlined > div > div.c-vod-PlayerContainer-screen.com-vod-VODScreen-container > div.com-a-Video__container > div > video:nth-child(7)").requestPictureInPicture();
このAPIで他に同じようなことをしてる人いそうだな―、と思って調べたら、もっと汎用性のあるブックマークレットがありました。
abemaビデオ以外にもabemaTV/amazonビデオで動作したので、こちらの方が間違いなく使い勝手が良いです。以下に転載します。
javascript:document.querySelector("video[src]").requestPictureInPicture();
chromeで追加されたpicture in picture (pip)機能、切り替えが.requestPictureInPicture();のようなので現状使えないサイトでは対応するまでお気に入りに登録しとく幸せになれるかも
— りくだい (@rikulist) 2018年12月23日
例えばamazon prime videoだとjavascript:document.querySelector("video[src]").requestPictureInPicture(); pic.twitter.com/W7JaT33Xmg
Qiitaの仕様上、ブックマークレットのリンクの作成は出来ないようです。
もし登録や動作確認したい人は、↑をコピーして、ブックマークのURLに貼り付けてください。
やったこと
記憶ベース。使用環境/ブラウザはwindows10 home/chrome。デバッグや調査は省略。
- abemaビデオを再生中にデベロッパーツールを開く。
- Elementsタブで
<video>タグを検索する。 複数あったので、一つ一つ右クリックして→Copy→Copy JS Pathで要素を取得＋PIP化するAPIを着けてconsoleタブで実行。以下を実行でPinP再生成功。
document.querySelector("#main > div > main > div > div.c-video-EpisodeContainer-thumbnail.c-vod-PlayerContainer-container.c-vod-PlayerContainer-inlined > div > div.c-vod-PlayerContainer-screen.com-vod-VODScreen-container > div.com-a-Video__container > div > video:nth-child(7)").requestPictureInPicture()javascript:;でブックマークレット化して、冒頭の『出来たもの』の完成。
備考
- 当初はabemaビデオで、再生対象の動画を『ブラウザ全画面』するブックマークレットを、ものすごく雑に作る。＋ブラウザを最前面に固定で観ようとしていたのですが、数日で無用に。
- CMの所とかで、CMが流れながら本編動画が流れたり、自動遷移した後にPinPの画面が残ってたり、若干不整合があります。