Youtubeの広告を飛ばせるjavascriptを実装する。

2021.06.15

こんにちはJunです。私はテレビは見ないですがyoutubeはよく見ます。時間を吸い取られるのでアプリ制限とかで見ない様にしているのですが、ついついOKな時は見てしましまいます。そんなyoutubeですが有名な動画ほど広告がよく出現します。Googleもそれで稼いでいるのでしかたありませんが、興味のない広告ほど見たくなくるものはありません。

一応youtubePremiumに入ることで回避はできますが、流石にそこまでは興味ないので渋々広告を見ていました。ある日、youtubeの変態ネットワーク力やwebの構成を解析して研究していると動画が<video>タグで構成されていることがわかりました。

もしかしてと思い、videoタグあたりの構成を調べてみてjs consoleでいじったらなんと広告をスキップできてしまいました笑。今回はそんなjsでどうやって解析したのかとその広告をスキップできるスクリプトを最後に公開したいと思います。

しっかり観察する

まずは開発者ならばF12を開いて要素を確認してみましょう。動画が再生しているあたりにカーソルを合わせてみてみます。

<div class="html5-video-container" data-layer="0">
    <video tabindex="-1" class="video-stream html5-main-video" controlslist="nodownload" style="width: 853px; height: 480px; left: 0px; top: 0px;" src="blob:https://www.youtube.com/43acbaaf-53b3-48e4-baa4-3489fa140438"></video>
</div>

意外とvideoタグを使用しているんですね。canvasとか使って独自の動画プレイヤーでも実装しているのかと思いました。

そして広告が流れた時のvideoタグのsrcをみてみますとURLが変わっていました。なるほどね。このvideoのsrcを変えることで広告を流していたんですね。そしてみ終わったり、スキップを押すことでsrcと途切れた位置からスタートさせているのだと思います。意外とシンプル。

videoタグの仕様

基本的にDOMの属性や状態はjsを用いて操作可能です。videoにはcurrentTimeという再生位置のプロパティをもっています。つまり

videoタグのDOMを取得
currentTimeプロパティーを上書きする。
スキップのボタンをclickする

という流れで行けそうです。では実装しましょう。

consoleでスクリプトを記述

ブラウザではF12のconsoleですぐにスクリプトを実行できます。まずはvideoタグのDOMを取得します。上記の構成だったので、以下の様に取得してプロパティーを書き換えます。

let video = document.getElementsByClassName('html5-main-video')[0];
video.currentTime = 999;

実際にやってみると広告の再生位置がその時間に飛びます。もし動画の最大時間を上回る場合、currentTimeプロパティーには最大時間が代入されます。これだけでもいいかもしれませんが念のためスキップボタンを押せる様にしましょう（長広告対策）

スキップボタンの構造を見てみると

<div class="ytp-ad-skip-button-slot" id="skip-button:38" style="">
    <span class="ytp-ad-skip-button-container" style="">
        <button class="ytp-ad-skip-button ytp-button">
            <div class="ytp-ad-text ytp-ad-skip-button-text" id="ad-text:39" style="">
                広告をスキップ
            </div>
            <span class="ytp-ad-skip-button-icon">
                <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><use class="ytp-svg-shadow" xlink:href="#ytp-id-971"></use><path class="ytp-svg-fill" d="M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z" id="ytp-id-971"></path></svg>
            </span>
        </button>
    </span>
</div>

なるほどねー。とりあえずytp-buttonに対してclickメソッドを実行すれば行けそうです。

document.getElementsByClassName('ytp-ad-skip-button')[0].click();

そして一発のスクリプトでスキップできる様に一行に合わせてあげます。

console

document.getElementsByClassName('html5-main-video')[0].currentTime = 999;document.getElementsByClassName('ytp-ad-skip-button')[0].click();

それで実際にconsoleで実行したところなんと、普通にスキップできました！consoleを開く必要はありますが結構単純にスキップすることができました。

クライアントにデータがある以上スキップは一応可能

一応現段階（2021.06)ではこの方法でいけますが、classが変わったり専用の動画プレイヤーを使用すると少しスキップ機能は大変になるかもしません。今回はDOMでアクセスできるもので簡単にプロパティーを変更することで対処できました。

youtubeにとっては嫌な方法ですがクライアントにデータが届く以上しかたありません。ビルドさせたjsファイルで動画プレイヤーを実装させたり、chromeに組み込まれた流石にできないかもしれませんね。