16
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Abemaビデオを、PinP再生するためのブックマークレットを、雑に作った+もっと使い勝手のいいブックマークレットがあったので紹介する

Last updated at Posted at 2019-04-26

やりたいこと

出来たもの

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();

Qiitaの仕様上、ブックマークレットのリンクの作成は出来ないようです。
もし登録や動作確認したい人は、↑をコピーして、ブックマークのURLに貼り付けてください。

やったこと

記憶ベース。使用環境/ブラウザはwindows10 home/chrome。デバッグや調査は省略。

  1. abemaビデオを再生中にデベロッパーツールを開く。

  2. Elementsタブで<video>タグを検索する。

  3. 複数あったので、一つ一つ右クリックして→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()

  4. javascript:;でブックマークレット化して、冒頭の『出来たもの』の完成。

備考

16
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?