標準のHTML5でも動画プレイヤーのカスタマイズがしたい! - Qiita

概要 皆さんこんにちは。急に暖かくなったと思ったら少し肌寒くなり土日の雨で桜が散ってしまいそうですが、花粉症などいかがお過ごしでしょうか。(乳酸菌さん!もっとアレルギー抑えて!) さて、今回は動画プレイヤーをいい感じの見た目にしたいのですが、ググっても大抵 video.js か jQueryを使った記事が多いです。 MDNにもVideo player styling basicsというページはありますが、なんかカッコよくありません。 というわけでChatGPTに書いてもらいました。 要件 デザインがそれなりにダサくないこと マウスを動かさずにしばらくするとコントローラーは非表示になる プログレスバー、時間表示、ピクチャinピクチャボタンはいらない 再生停止ボタン、ミュートボタン、音量調整が欲しい 出来上がり すんなりといい感じのものが出来上がりました。左はマウスを動かした時で、右は1秒何も