PersonWriter′s Room

「AmbTV Comfy」ボリューム操作の機能を改善（110）/ JS

「Shift」キーによるボリューム操作の機能を改善

「AmbTV Comfy」で再生ボリュームの操作を採り入れたのは、2026年2月25日の「ver.8.2」からです。

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

この機能はけっこう失敗を重ねて現在に至りますが、久しぶりに落ち着いて機能のチェックをしていて、何が問題なのか漸く気付きました。

「Shift」キーを押下すると「コントローラー」が表示され、ボリューム操作ができるインターフェイスですが、キーを押しても「コントローラー」が表示されない事があります。「Shift」キー操作がダメならマウスが使えるので、深刻に考えていなかったのですが、単純な問題点に気付きました。

動画コントローラーが非表示ならボリュームコントローラーも非表示

動画の下部に表示される「動画コントローラー」は複数の機能を統合したパーツで、そのひとつが「ボリュームコントローラー」です。そのため「動画コントローラー」が非表示になると「ボリュームコントローラー」も非表示になり、音量を調節する「スライダー」は「ボリュームコントローラー」の一部で、「スライダー」も非表示になります。

「動画コントローラー」が非表示の時は、「Shift」キーを押下しても「スライダー」が表示できなくなります。それを、この機能の不具合と思っていたのです。

「動画コントローラー」と無関係に「ボリュームコントローラー」を表示

「Shift」キー押下で確実に「スライダー」を表示するには、同時に「動画コントローラー」の全体を表示すれば良いですが、とても無骨なインターフェイスになります。「スライダー」だけを表示するには、「visibility」が利用できる事が判りました。

親要素に「visibility: hidden」を指定すると、子要素も「継承」によって非表示になります。しかし、子要素に「visible」を指定すると、「visibility: hidden」の「継承」にも関わらず子要素だけを表示にできます。

これは「opacity」「display」などと異なる、特異なプロパティです。親要素「動画コントローラー」の状態にかかわらず、「スライダー」だけの「表示・非表示」を操作するのに使えるわけです。

ABEMAのデフォルトは、「動画コントローラー」の「表示・非表示」は「opacity」「visibility」の両方を使ってコントロールしています。わざわざ両方を使用する理由は不明ですが、この「opacity」の指定があると「スライダー」だけ自由にコントロールできません。そこで、「動画コントローラー」の「opacity」は常に「1」を指定して、表示のコントロールは「visibility」だけで行う様に改めました。

「AmbTV Comfy」 ver.11.0 133行～

'.com-vod-VideoControlBar, '+
'.com-vod-VODScreen__video-control-bg { opacity: 1; } '+

その上で、「Shift」キー押下で「スライダー」の「visibility: visible」を指定すれば、「動画コントローラー」の「表示・非表示」と無関係に「スライダー」を表示にできます。

「AmbTV Comfy」 ver.11.0 120行～

'<style class="atv_style_hide">'+
'.com-vod-VODScreen-container { cursor: none; } '+
'.com-vod-VideoControlBar, '+
'.com-vod-VODScreen__video-control-bg, '+
'.c-tv-TimeshiftPlayerContainerView-comment-button { '+
'visibility: hidden; } '+
'</style>'+

上は、動画コントローラー等を非表示にする styleコードです。以前は「opacity」も指定していましたが、「opacity: 1」を常に保つ様に改めています。

下は、「Shift」キー押下で「スライダー」を表示するコードです。

「AmbTV Comfy」 ver.11.0 592行～

else if(event.shiftKey && !event.ctrlKey){
    let slider_h=document.querySelector('.com-playback-Volume__slider-container');
    if(slider_h && is_slider_hidden()){
        slider_act();
        slider_h.style.opacity='1';
        slider_h.style.visibility='visible'; }

これらのコードの更新で、「Shift」キーを押下すれば、常時「スライダー」が表示できる様になりました。

以上の更新をした「AmbTV Comfy」ver.11.0 をアップロードしました。