やりたいこと
- abemaビデオで再生している動画を、ツールバーから『ブラウザ全画面化』ができる。
- これを画面上の要素のクリックをせずに、同様の操作をしたい。
- 頑張らない。
出来たもの
javascript:document.querySelector("#main>div>main>div>.c-vod-PlayerContainer-container>div>.com-vod-VODScreen-video-control>div>div:nth-child(6)").click();
Qiitaの仕様上、ブックマークレットのリンクの作成は出来ないようです。
もし登録や動作確認したい人は、↑をコピーして、ブックマークのURLに貼り付けてください。
やったこと
記憶ベース。使用環境/ブラウザはwindows10 home/chrome。デバッグや調査は省略。
-
abemaビデオの任意の動画を開く。
-
『ブラウザ全画面』の要素を右クリックして検証。
-
要素を選択した状態でデベロッパーツールが開かれる。
-
内側のアイコンの要素が選択されていたら、最上位の『ブラウザ全画面』の親要素を探す。目的の要素であれば、右クリック→Copy→Copy JS Pathをクリック。
-
以下のjavascriptが取得できた。
document.querySelector('#main > div > main > div > div.c-video-EpisodeContainer-thumbnail.c-vod-PlayerContainer-container.c-vod-PlayerContainer-inlined > div > div.com-vod-VideoControlBar.com-vod-VODScreen-video-control.fade-in > div.abm_6043bbc3_a.abm_6043bbc3_q > div:nth-child(6)') -
ビデオ単位で変わりそうな要素を消す。また、長すぎるので必要最低限の要素のみにする。
document.querySelector("#main > div > main > div > .c-vod-PlayerContainer-container > div > .com-vod-VODScreen-video-control > div > div:nth-child(6)") -
デベロッパーツールのconsoleタブで、動作確認。取得成功。
-
.clickをつけてconsoleタブで動作確認。動作成功。
document.querySelector("#main > div > main > div > .c-vod-PlayerContainer-container > div > .com-vod-VODScreen-video-control > div > div:nth-child(6)").click() -
javascript:;でブックマークレット化＋空白だけ削除してブックマークに登録。冒頭の『出来たもの』の完成。
備考
- 本当は『1.3倍速再生』もブックマークレット化したかったけどid中に
.が入ってるためか、querySelectorが上手く動作せず、 getElementByIdでも.checked=trueしても動作しなかったので諦めた。 - よければ、abemaビデオで、無料のみを表示するブックマークレットを、ものすごく雑に作る。も併せてどうぞ。