YouTube動画のADミュートツールを試作（1）/ JavaScript

ADブロックツールの試作 

最近の YouTubeのAD強制の傾向には、またかと思ってしまいますが、学習がてらにささやかなブロックツールを試作しました。 ネット上には沢山のADブロックツールが公開されていて、有名なツールは高度な技術で制作されていますが、自分で作って見ると、その技術の一端を垣間見る事が出来て無駄ではないと感じます。

今回制作したツール「YT AD-Mute」は、非常にシンプルなコードです。 しかし、これを纏めるのにかなり色々なコードを試し、効能をチェックしました。 その過程で、以下の様な事で躓きました。

◎「動画プレーヤー」や「video要素」を削除すると、ブロックが働いた後は、動画の非表示の状態から戻れない。（黒画面）

◎ ADの動画データを削除する事でブロックが出来るが、補う様に何度もADデータが読み込まれ、却って通常の表示に戻るまでに時間がかかる。

◎ 2-3件のADが続けて表示される場合が多く、動画データの削除では、1件目のADが流れてしまう。 その後の2件目以降は非表示になるが。

◎ 動画データを削除せずに、ADの表示速度を上げて早く終わらせる方が、通常表示に復帰する時間が短かくできる。

高度なブロックツールは、この様なベタな手法を使わないので、さすがに全くADの存在を感じさせません。 ADに関わる通信部分をブロックしている様です。

「YT AD-Mute」の仕様 

「YT AD-Mute」は、「Tampermonkey」に登録して常時「ON」にしておくと、YouTube動画が表示されると自動的に機能します。（常駐型ツール）

通常動画にAD動画がインポーズされると、それを感知してブロック動作をします。 

▪ ブロックは、16倍速でAD動画を早送りしますが、通常のADは2～3sec程度で通常の動画に復帰します。 ただし、中には長いAD動画があり、その場合は復帰まで時間が必要です。

▪ 復帰するまで「黒画面」で「無音」になりますが、ブロック中を示すために画面の左上に小さな「🟢」マークを表示します。

「ブロック返し」の影響を受けない 

「YT AD-Mute」は試作ツールで、人気のあるADブロック拡張機能のスマートなブロック動作には、とても及びません。

ただし、現在のブロック拡張機能は、サイトを開いた最初に「OFF」にリセットされる（ブロック返し）場合が多いです。 その点、このツールは影響されず便利です。

▪「YT AD-Mute」はとてもシンプルなので、他のブロックツールと一緒に使用しても問題は無いと思います。

「YT AD-Mute」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 YT AD-Mute 〕 ver. 0.1

// ==UserScript==
// @name         YT AD-Mute
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  YouTubeのADを非表示ミュートする
// @author       everyone
// @match       https://www.youtube.com/*
// @icon          https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==



let disp=
    '<div class="adled">🟢</div>'+
    '<style>.adled { position: fixed; top: 21px; left: 6px; z-index: 3000; '+
    'font-size: 10px; opacity: 0; }</style>';
document.body.insertAdjacentHTML('beforeend', disp);

function check(){
    let adled=document.querySelector('.adled');
    if(adled){
        adled.style.opacity='1';
        setTimeout(()=>{
            adled.style.opacity='0'; }, 2000); }}



let target=document.querySelector('head');
let monitor=new MutationObserver(main);
monitor.observe(target, { childList: true });

main();

function main(){
    let container=document.querySelector('.video-ads');
    if(container){
        container.remove(); }

    let player=document.querySelector('#movie_player');
    let monitorp=new MutationObserver(main_p);
    monitorp.observe(player, { attributes: true, attributeFilter: ['class'] });

    main_p();

    function main_p(){
        if(player.classList.contains('ad-showing')){
            check();
            player.style.zIndex='-1';
            let video=player.querySelector('.video-stream');
            if(video){
                video.playbackRate=16;
                video.volume=0; }}
        else{
            player.style.zIndex='0'; }}

} // main()

「YT AD-Mute」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「YT AD-Mute」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）