YouTube動画のADミュートツール「YT AD-Mute」（2）/ JavaScript

「YT AD-Mute」の動作はミュート 

このツールの動作は、ADの非表示と早送りです。 YouTube の動画プレーヤーは、ブラウザが提供する「html5-video-player」で構成されています。 動画プレーヤーは JavaScriptで一定程度のコントロールが可能で、「YT AD-Mute」はそれを利用しています。 これは、AD動画がインジェクションされてから機能する手法なので、後手に周って余りスマートな動作ではありません。

操作は、インジェクション監視 ➔ AD表示が始まったら 16倍速で早送り ➔ AD動画の表示を隠し、音声のボリュームを「0」にする、というものです。

「ver.0.1」では、AD動画のミュート時は画面の左上隅に「🟢」のマークを表示していましたが、今回はミュート中が判り易いローディングマークを表示するバージョンを制作しました。

ローディングマーク 

「ローディングマーク」は、「html5-video-player」がデフォルトで備えている機能を利用しています。 このマークは、本来は「明るいグレー」の配色ですが、ADミュートの動作中はそれ示すために「グリーン/白」の配色にアレンジしています。

なお 上のスクリーンショットは、YouTube動画・動画サイトをアレンジする「YouTube Theater」というスタイルを適用しています。

お勧めの アレンジスタイル「YouTube Theater」

YouTube動画プレーヤーをカスタマイズする実用的スタイルです。 YouTubeサイトのシアターモードをサブウインドウで表示にする事をメインにしていますが、各種の再生条件（埋込型を含む）で「動画を見易くする」ことに重きを置いたスタイルです。

YouTube Theater　　by personwritep

早送りについて 

デフォルトの YouTube動画プレーヤーは、マニュアル操作で最も早い早送りの速度は 2倍速です。

しかし、ブラウザの提供するコントロールは、Chrome や Firefoxでは 16倍速が最大の様です。 JavaScriptで操作した場合、Chromeでは 16倍を超えると通常速度になり、無効な速度指定になる様です。 また Firefoxでは、20倍等の指定も可能ですが、どうやら 16倍が実際の上限の様でした。 そのテストから、このツールは AD動画の早送りに 16倍速を設定しています。

なお、AD動画の長さや連続回数が一定ではないので、ミュート状態からの復帰は、すぐに復帰する場合と、少し時間を要する場合があります。

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

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

❶「Tampermonkey」を導入します

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

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

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

⭕「Tampermonkey」の導入方法

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

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

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

〔コピー方法〕 右サイドバーの   マークのボタンを1度押してください。

　コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。

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

〔 YT AD-Mute 〕 ver. 0.2

// ==UserScript==
// @name         YT AD-Mute
// @namespace    http://tampermonkey.net/
// @version      0.2
// @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==


function check(n){
    let sp=document.querySelector('.ytp-spinner');
    if(sp){
        let spc=sp.querySelector('.ytp-spinner-circle');
        if(spc){
            if(n==1){
                sp.style.display='block';
                spc.style.borderColor='#009688'; }
            else{
                sp.style.display='none';
                spc.style.borderColor='#ddd #ddd transparent'; }}}}



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(){
        let video=player.querySelector('.video-stream');
        if(video){
            if(player.classList.contains('ad-showing')){
                check(1);
                video.playbackRate=16;
                video.volume=0;
                video.style.opacity='0'; }
            else{
                check(0);
                video.style.opacity='1'; }}}

} // main()

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

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

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

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