概要

再生リストを作成して、しばらく経つと、サムネイルが以下のようなアイコンになっていることがあります。これは、その動画が削除されたことを意味しています。
リスト内にこのアイコンが増えてくると困ります。そのため、それらを自動削除するスクリプトを作成しました。

削除方法

削除の方法は、サムネイルの画像サイズをチェックして一定サイズ以下の画像を含むタグを削除しています。サムネイルにはいくつかのサイズがあります。
ここでは、mqdefault.jpgのアイコンのサイズをチェックしています。

事前準備

あらかじめ、リスト内のサムネイルの形式を整理しておきます。一通りのサムネイルの名称は、mqdefault.jpgの形式にしておきます。

サンプル関数　delete_undef_thumb(html)

以下のスクリプトはリスト内の不要タグを削除するサンプルの関数です。本番環境からコピーしたコードから説明に不要なコードは削除しています。本番環境はなつかしの曲(ポータル)です。ytimg.naturalWidthをチェックして120より小さいか大きいかで判断しています。小さければリストから削除します。

//******************************************************************
//リストから不要タグを削除
//サムネイルチェック
//サイズはmqdefault.jpgを参照
//******************************************************************
var ytimg = new Image();
var save_data = [];
function delete_undef_thumb(html) {
    var def = $.Deferred();
    def.done(function (str) {
        //alert("完了しました。");
    });
    //default.jpgチェック
    if (html.indexOf("/default.JPG") !== -1) {
        alert("/default.jpgが含まれています。");
        return;
    }
    var dom_parser = new DOMParser();
    document_obj = null;
    //
    document_obj = dom_parser.parseFromString(html, "text/html");
    //チェックしたタグを取得後、タグリストをコピーする。
    elemx = document_obj.getElementsByClassName("ui-state-default");
    thumb = document_obj.getElementsByClassName("thumb");
    save_data = "";
    ytimg = new Image();
    //asyncとawait
    //非同期関数定義
    (async() => {
        //リストのタグを1件づつチェック
        for (let i = 0; i < elemx.length; i++) {
            //待つ
            //完了を待つ
            await new Promise(resolve => {
                //50ミリ秒毎に実行
                setTimeout(() => {
                    //ロード    
                    ytimg.src = thumb[i].src;
                    //ロードを確認後、
                    ytimg.onload = function () {
                        //サイズをチェック
                        if (ytimg.naturalWidth > 120) {
                            save_data += elemx[i].outerHTML;
                        }
                        //ここで、1件解決
                        resolve();
                    }
                }, 100);

            }, reject => {
                alert("404エラー");
                reject();
            });
            //次をロード
        }
        //**********************************************************
        //すべて完了
        //結果はsave_dataに 
        //**********************************************************
        $("#sortable").html(save_data);
     
    })();
    //完了時にリターン
    return def.promise();

}
//呼び出し側
//
delete_undef_thumb($("#sortable")[0].innerHTML).then(
function (resp) {
                //完了時のコールバック処理
                alert(resp);
});

呼び出し側のパラメータ

リスト要素

サンプルのリストは「なつかしの曲(ポータル)サイト」のリストをベースにしています。
このサイトのリストは$("#sortable").html()で取得しています。ブロック要素のid="sortable"に各動画のタグ情報が格納されています。

あとがき

現状は、このスクリプトで、「なつかしの曲(ポータル)サイト」は動作しています。
削除された動画のサムネイルがリストの中に表示されていると見栄えがよくありません。
再生リストを再生するときはこれらの不要の動画タグをすべて削除して再生したいと思い、このスクリプトを作成しました。