パソコンのFirefoxでAmazonプライム・ビデオを再生する時にどうしても表示されてしまう再生ボタンやシークバー、暗くなる処理を消して再生する方法を紹介します。
まず最初に知っていて欲しい事があります。CSSという単語です。CSSはWebサイトの見え方を定義する言語です。Amazonプライム・ビデオの再生画面でも例に漏れずボタンやシークバー、暗転処理の見え方がCSSによって定義されています。今回はこのCSSが書かれたファイルを書き換えるFirefoxの拡張機能を使って、ボタンやシークバー、暗転処理を非表示に設定し直すことで、それらが見えない状態で映像を再生します。なお、この拡張機能はGoogle Chrome版もあります。私は試してはいませんが同じ要領でGoogle Chromeでも実現できるかもしれません。
今回、少しだけCSSのコードを書きますが、この記事はHTMLやCSSなどのWebサイトに関する知識が無くてもできるよう努めています。それでもわかりにくい所はあるかもしれませんがご勘弁下さい。なお、今回紹介する方法で使用しているWebブラウザはFirefox 101.0.1 です。
CSSを書き換えるFirefoxの拡張機能Stylusを導入する
Firefoxにはデフォルトでは見ようとしているWebサイトのCSSコードを書き換える機能はありません。まずはそれを実現できる拡張機能を導入します。Stylusという機能です。
以下のサイトにアクセスします。
Google Chrome版はこちらのようです。
「Firefoxへ追加」をクリックします。
「Stylus を追加しますか？ この拡張機能は以下の許可設定が必要です」と表示されます。「追加」をクリックします。
「Stylusが追加されました」と表示されます。「OK」をクリックします。
Firefoxのツールバー右上に「S」のようなマークが追加された事を確認します。
非表示にしたいボタンや暗転処理が置いてあるHTML要素を特定して、従っているCSSのクラスを調べる
Webサイトにボタンや画像が置いてある事を定義する言語がHTMLです。こちらも例に漏れずAmazonプライム・ビデオでも再生ボタン、シークバー、暗転処理が存在する事がHTMLファイルに定義されています。こういったWebサイトに置いてあるものを要素と呼びます。今回非表示にしたいボタンや暗転処理は、画面全体に広がる一つの大きな透明な要素の上に置いてあると予想されます。その要素をFirefoxのWeb開発ツールを使って特定します。特定した要素には「このCSSに書いてあるように表示します」と従うCSSが複数指定されているので、それらのCSSの内容を「非表示にします」と書き換えるわけです。
Firefoxの右上のメニューボタンを押して「その他ツール」を選択します。
「Web開発ツール」をクリックします。
「Web開発ツール」が開きます。左端のアイコンをクリックします。
マウスポインタがある位置のHTML要素が表示されるようになります。全体を覆っている透明な要素が選ばれるようにマウスポインタを移動します。画像のように全体の色が青がかって変わる場所です。この動画では赤丸で囲った箇所辺りにマウスポインタを合わせると狙った要素を選ぶことができました。選択できたらクリックします。すると選択した要素を指すHTMLのコードが強調表示されます。
<div class="クラス1 クラス2 クラス3" style="cursor: none;">
ここで指定されているスペースで区切られた三つのクラスをメモします。ランダムな文字列に見えますがユーザによって違うのかもしれません。私の場合と全く同じではないと思われます。このクラス一つ一つがボタンやシークバーの見え方をどうするか従うCSSコードを表しています。
三つのクラスをメモしたら右端の×ボタンでWeb開発ツールを終了します。
非表示にしたいボタンや暗転処理が置いてあるHTML要素が従っているCSSクラスの指示を、「非表示にします」に書き換える
いよいよCSSの書き換え作業に入ります。右上のStylusボタンを押します。表示されたメニューの「amazon.co.jp」の文字列をクリックします。
CSS書き換え画面が表示されます。
下記のように追記します。
.クラス1{
display: none;
}
.クラス2{
display: none;
}
.クラス3{
display: none;
}各クラスの前に「.」が必要な事に気を付けて下さい。
クラス1～３に「非表示にします」と書いています。ボタンやシークバーが置いてある要素がクラス1～3に従うようになっていたので、このように書き換える事でボタンやシークバーが非表示になります。
どのクラスがどのコントロールに影響を与えるのかまでは調べていません。クラス3は変更しなくてもぱっと見非表示になりましたが、念のため非表示にしておきます。
書き終えたら「保存」ボタンをクリックします。
右上のStylusアイコンが色濃くなって有効になっている事を確認して下さい。以上で作業は終了です。マウスポインタを画面に持っていっても、キーボードのスペースキーで再生を開始しても、各種ボタンやシークバーが表示されず、暗くもならないと思います。
ショートカットキーで再生する
ボタンやシークバーが消えてマウス操作ができなくなっているため、Amazonプライム・ビデオのショートカットキーを使って再生や早送りなどの操作を行います。
操作は下記のショートカットキーで行います。アマゾンのヘルプ＆カスタマーサービスを引用します。
スペース: 再生/一時停止を切り替えます。
F: 全画面表示を開始または終了します。
Esc: 全画面表示または再生を終了します。
左矢印キー: 10秒巻き戻します。
右矢印キー: 10秒早送りします。
上矢印キー: 音量を上げます。
下矢印キー: 音量を下げます。
M: ミュートを切り替えます。
C: 字幕のオン/オフの切り替え、利用可能な字幕の言語を切り替えます。
Prime Videoのキーボードショートカット
書き換えたCSSコードを消去する
CSSの書き換えを間違えた場合や元の状態に戻したい場合の手順を紹介します。右上のStylusボタンを押して表示されるメニューから「amazon.co.jp」のチェックを外すとCSSを書き換えていない元の状態に戻ります。このCSS自体を消去したい場合は「管理」ボタンをクリックします。
表示された管理画面から「amazon.co.jp」のチェックを外すと、先ほどと同じように書き換えてない状態に戻せます。その右の×ボタンを押すとCSS書き換えコード自体を削除する事ができます。「このスタイルを削除してもよろしいですか？」と表示されるので「削除」を選択します。
最後に
本記事は以上になります。マウス操作でもキーボード操作でも再生を開始する時は必ず暗くなってしまうので、開幕にしっかり見たいシーンがあったりするととても不便だなぁと思っていました。解決できて良かったです。
この記事が同じ悩みで悩んでいる方のお役に立てたら嬉しいです。
