YouTube広告を早送りする Ad Speedup 拡張機能は何をしているのか？

1. はじめに

↑ これは、Chrome ブラウザの拡張機能です。YouTubeの動画上に広告が表示されたら、その再生スピードを上げ、高速で広告を終了させます。

この拡張機能がやっている処理を紹介します。

2. Ad Speedup がやっていること

まず前提知識ですが、YouTube のページにおいて、動画の部分は以下のHTMLで構成されています。

<div id="movie_player" class=" 広告が始まると、ここに ad-showing か ad-interrupting が追加される ">
  ...
  <video src="blob:https://www.youtube.com/xxxx-xxxx"></video>
  ...
</div>

• id属性に “movie_player” が指定された <div>要素の中に、動画自体を表す <video> 要素が入っています。
• 広告の動画も、この <video>要素を使って再生されます。
• 広告のスキップボタンは、<div id="movie_player">要素内に用意されます。
• 「<div id="movie_player">要素の class属性に、ad-showing もしくは ad-interrupting という文字列が追加された」➡「広告が始まった」と判断できます。

これを踏まえて、この拡張機能がやっていることは以下になります。

1. MutationObserver を使って、<div id="movie_player">要素内の変化を監視する。
2. 広告の再生が始まったことを検知したら
   • <video>要素のプロパティを変更して動画再生スピードを上げる。ついでに音はミュートする。
3. スキップボタンが表示されたことを検知したら
   • スキップボタンを押す。

これだけです。

再生スピードを上げるだけでなく、スキップボタンも利用することによって、広告の表示時間をより短くしています。これで結構差が出ます。

動画の再生スピードを変える処理とミュートする処理は、<video>要素が標準で持っている playbackRate や muted といったプロパティに値をセットするだけで実現できます。

これらの処理自体は、この拡張機能に関係なく以前から実行できます。例えば、YouTubeの動画に広告が表示されたら、DevTools（Ctrl+Shift+Iキーで表示されます）の Consoleパネルを開き、以下を書いて実行（Enterキーを押す）すれば広告が早送りされます（広告が表示されていない場合だと、見ている動画が早送りされます）。

$('video').playbackRate=16,$('video').muted=true

このようなコードを、ブックマークレットにして実行させてもよいかもしれません。自分で拡張機能を作るのも割りと簡単です。

3. おわりに

Chrome を開発しているのは Google社、YouTube を運営しているのも同じくGoogle社なので、この拡張機能はそのうち禁止されるかもしれません。YouTubeの利用者が広告を見てくれないとサービスが成り立たないからです。

Google社は何か対策してくるのでしょうか？

※ しかし、このような拡張機能でも審査が通ったんですね。