AbemaTV TVチャンネルツール「 AmbTV OnAir」（8）/ JavaScript

CMのインポーズタイミングを調査中 

6月に入ってから、TVチャンネルのCMの入り方に変更があった様です。 CMをどの様にインポーズするかは、AbemaTVの運営にとって重要なポイントなので、今後も色々と変更・改変が行われるものと思います。

 

「 AmbTV OnAir」は、AbemaTVの「TVチャンネル動画」の専用閲覧ツールです。 CMの「ミュート」機能は独自のもので、「動画コンテンツ」⇄「CM」の切換えのタイミングを適確に捉える事がこの機能の生命線です。 今月に入ってから「ミュート」が効かないCMが散見される様になり、従来と異なるCMへの切換えがある事が判りました。 ただし、従来の通りの切換えは現在も主流です。

 

この新規の切換え仕様を調べて、可能なら対策コードを作りたいところです。 しかしCMの切換えは、1話の動画が約30分として、その間に2回か3回しか生じません。 それを待って調べるのは大変に時間を無駄にするので、現在は下の様な4つのウインドウで別チャンネルを表示して、効率を良くしています。

 

 

4個のチャンネルを同時に調査 

下は、モニター全体のスクリーンショットです。 Win11 では、4画面の同時整列などが簡単にできます。

 

 

 

ブラウザ画面の基本構成 

下は、各ウインドウのブラウザ画面の基本構成です。

 

 

 

◎ 画面を最大限に広くするために、Chromeのツールバーを非表示にしています。

ツールバー非表示のウインドウを作る方法は以下です。

 

▪ AbemaTVサイトを開き、ブラウザの「設定」メニューで「保存と共有」を選択

▪「ショートカットの作成」を選択

▪「ウインドウとして開く」にチェックを入れて「作成」を実行する

 

デスクトップにショートカットが出来ますが、これは1回押すごとに1画面を開くので、1個あれば共用できます。

 

◎ スクリプトの動作表示は、どの状態の画面でどのコードが動作するかをチェックするために必須です。 この表示に関しては、以下のページに説明があります。

 

 

 

信号機の様なデザインですが、トリガー要素の「ABEMAロゴ」の表示位置を開けて、右に寄せて表示しています。

 

◎「動画タイトル」もトリガー要素で監視したいので、「Stylus」で以下のテスト用のCSSコードを適用しています。

 

▪ スタイル名：「AbemaTV　動画タイトルの強制表示」

▪ 適用先：「次で始まるURL」「 https://abema.tv/now-on-air 」

/* 左列 ナビを非表示 */
.c-application-SideNavigation {
display: none; }

/* 下部の動画タイトル部を表示 */
.com-tv-TVScreen__footer-container {
transform: unset;
visibility: visible; }

 

◎ その他

 ▪ PC全体の音量を絞らないとゲームセンターの様に騒がしくなります。

 

 

 

タイミング調査コード 

今回は、「ロゴ」の表示なしに「CM」に切り換わるパターンが生じました。 これを「ミュート」するには「記事タイトル」の「表示・消失」の監視して、「消失」をトリガーとして「ミュート」適用をするしか方法が無い様です。

 

❶ これまで対応して来た（正常な）「CM」への移行は、ジャストタイミングで「ミュート」を適用できました。 

 

 

 

❷「ロゴ表示」なしに「CM」に移行するパターンです。

「動画タイトルの消失」は、CMへの切換えより数秒以上手前で発生し、そのタイミングが不確定です。「ミュート」適用が「動画コンテンツ」の終了前になります。

 

❸ 場合によっては「動画タイトル」が非表示になった後から「ABAMAロゴ」が表示され、正常な「CM」への移行になる場合があります。 その場合も「動画タイトルの消失」をトリガーにした対策コードは「ミュート」を適用してしまいます。

 

 

適切な遅延時間を調べる 

この ❸の残念な場合を救うには、「ミュート」適用を遅延させるしかありません。 その場合、もし「ロゴ」のトリガーが無い ❷の場合だと、「CM」のミュートが遅れることになります。 では、どの程度の遅延が良いのか？ とにかく、色々な動画の状態を調べることにしたのです。

 

この調査には、「動画タイトルの消失」から「ロゴの表示」までのタイミングを測定する計測コードを組込みました。

 

let LF=document.querySelector('.com-tv-LinearFooter__feed-super');
let monitor2=new MutationObserver(con_vol2);
monitor2.observe( LF, { childList: true });

function con_vol2(){ // 動画タイトルによるミュート
    if(LF.textContent){
        v_vol(1); }
    else{
        let startTime=performance.now();
        yellow_ck(); // 🟡

        let retry_=0;
        let interval_=setInterval(wait_target_, 10);
        function wait_target_(){
            retry_++;
            if(retry_>1000){ // リトライ制限 1000回 10secまで
                clearInterval(interval_); }
            let eyec=TP.querySelector('.com-tv-TVScreen__eyecatch');
            if(eyec){
                clearInterval(interval_);
                let endTime=performance.now();
                if(0<endTime - startTime<10000){
                    console.log(endTime - startTime); }
            }}}

} // con_vol2()

 

太字のコードが、「動画タイトル消失」と「ロゴ表示」間の時間を測定します。 ❸ のタイプの「CM」移行が生じる度に、測定結果が DevToolsのコンソールに書き込まれます。 4画面表示を暫く放置してから、コンソールの結果を調べるだけです。

 

 

 

計測の結果 

下は、計測中の2画面が「CM」になった時のスクリーンショットです。 左上は「ロゴ」表示なしで「CM」に移行したので、「ミュート」が適用されていません。 左下は「ロゴ」が表示され、「ミュート」が適用されています。

 

 

 

下は、実際の結果のサンプルです。 計測を初めて間もないので、このウインドウの結果は 5件しかありません。

 

 

 

「0.01sec」のほぼ同時のタイミングもありますが、「1sec」～「8sec」といったばらつきがあります。

 

3時間程度の後に調べた結果、1個の画面はフリーズしていましたが、以下の結果が得られました。

 

 

 

考察 

上図の結果を表にしました。

 

                   
間隔（sec） 0 1 2 3 4 5 6 7 8
カウント 36 8 3 8 1 0 4 2 2

 

全カウントは 64 で、半分が「動画タイトル消失」の直後に「ロゴ表示」が生じたという結果です。 ただし、これは反対方向の「ロゴ表示」後に 「動画タイトル消失」が生じた場合を計測していないので、「消失」のタイミングの多くは「ロゴ表示」のタイミングに前後して分布しているという程度の事しか判りません。

 

ストリーミングの動画配信で、実際の動画の末尾が再生されるより前に動画データの受信は終わっています。「動画タイトル」を「削除」する仕組みは判りませんが、実際の動画末尾より前に「動画タイトル」を「削除」できる状態にあるのは確かです。

 

実際に「8sec」も手前でタイトル削除が生じているので、「削除」のタイミングで「ミュート」をかけると、テーマ曲の最後がバッサリとカットされる場合もあります。 これはCMが流れてしまうよりも嬉しくないです。

 

未定ですが、もし対策コードで「ミュート」適用の遅延を行うなら、上の結果から「3sec」程度が良いのではと思っています。 遅延を少なくした場合は、早くミュートが適用され、本編側（殆どが動画タイトル部やエンディング部）に「ミュート」が開始され、遅延を大きくした場合はCM側の頭が「ミュート」されずに表示されます。 どちらにせよ、「切りの良い」ミュートにならないのが痛い所です。

 

対策コードを実装すべきかどうか、未だ暫くテストが必要です。

 

 

 

「 AmbTV OnAir」

このツールは「 AmbTV Comfy」のサブツールで、両方を同時に併用できます。

「ミュート」機能の設定方法は、以下のページを参照ください。

 

 

 

 

「AmbTV OnAir」最新版について 

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

 

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