「AmbTV Comfy」再生ボリュームのコントロールの更新（93）/ JS

再生ボリュームのコントロールの2重化

再生ボリュームのコントロールを「Shift+⇧」「Shift＋⇩」のショートカット操作で行う機能は、以下の ver.8.2 で採り入れました。

「AmbTV Comfy」再生ボリュームのコントロール（82）/ JS「Video要素」の「ボリューム」AbemaTVは、動画再生開始時に「ミュート」を設定する事が多いので、常に最大ボリュームで動画再生を開始する様にして来ました…

この機能を導入してから、ボリュームコントロールが2重になる現象に出会いました。下は極端な状態を作ったところですが、ポリュームスライダーが 2個あります。

この様になる意味を今回、漸く理解しました。右側は「Video Player」本体のスライダーで、本来は非表示です。それを「AmbTV Comfy」のショートカット操作の際に表示させたものです。一方、「動画プレーヤー」のデフォルトデザインは、本体とは別に動画コントロールを用意し、ABEMAに都合の良い機能を実現しています。ユーザーが操作するのはこれで、非表示のスライダーをリモート操作している状態です。

つまり、左側のスライダーはABEAMサイト製です。当初は、右側のスライダーだけを操作するコードしかなく、左側のスライダーを表示すると、音量は操作前の表示となり、実際の音量と相違が出来る状態でした。これを改善するため、両者の違いを修正するコードを採り入れましたが、2重化の状態を充分理解出来ていなかったので、問題を残したコードでした。（後から判ったのですが）

2個のスライダーをシンクロさせる関数

今回、問題の根本原因を把握できたので、ショートカット操作とマウス操作の両方で、常に同一の音量操作と表示を得られる関数を作りました。

「AmbTV Comfy」 ver.9.3 674行～

function slider_act(){
    let video=document.querySelector('.com-vod-VODScreen__player video'); // 🟨
    if(video){
        let vol=video.volume;
        let bar_h=document.querySelector('.com-a-Slider__bar');
        let bar=document.querySelector('.com-vod-VideoControlBar .com-a-Slider__bar');

        if(bar_h){
            let v_hight_h=getComputedStyle(bar_h).height.replace('px', '');
            let hilight_h=bar_h.querySelector('.com-a-Slider__highlighter');
            if(hilight_h){
                hilight_h.style.height=(v_hight_h/1)*vol +'px'; }}

        if(bar){
            let v_hight=getComputedStyle(bar).height.replace('px', '');
            let hilight=bar.querySelector('.com-a-Slider__highlighter');
            if(hilight){
                hilight.style.height=(v_hight/1)*vol +'px'; }}


        let VB=document.querySelector(
            '.com-vod-VideoControlBar .com-playback-Volume__icon-button');
        if(VB){
            if(VB.ariaLabel=="音声をオンにする"){ // ミュート解除
                VB.click(); }}}

} // slider_act()

非表示のスライダー（bar_h）と、通常のスライダー（bar）の両方について、実際の音量値に合わせてスライダーのバーの高さ（音量表示）が表示されるようにしています。この関数を、音量調節の操作をする度に（つまりスライダーが表示される度に）実行します。その結果、どちらのスライダーを操作しても、両方のスライダーが適切な表示になります。