-
スタイルシートを使用して非表示にする方法:
<style> video::-webkit-media-controls-progress-bar { display: none; } </style>
上記のコードは、Webkitベースのブラウザで進行バーを非表示にします。他のブラウザにも同様の効果を得るためには、適切なプレフィックスを使用する必要がある場合があります。
-
JavaScriptを使用して非表示にする方法:
<script> var videoElement = document.getElementById('myVideo'); videoElement.controls = false; </script>
上記のコードは、ビデオ要素のcontrols属性をfalseに設定することで進行バーを非表示にします。
myVideo
はビデオ要素のIDに置き換えてください。 -
プレイヤーのカスタマイズ: もし進行バーを完全にカスタマイズしたい場合は、HTML5ビデオプレイヤー自体をカスタマイズする方法もあります。この方法では、外部のライブラリやフレームワークを使用することが一般的です。
例えば、Video.jsやPlyrなどのHTML5ビデオプレイヤーライブラリを使用すると、進行バーを非表示にするだけでなく、さまざまなカスタマイズオプションを利用することもできます。
以上がHTML5ビデオで進行バーを非表示にする方法のいくつかです。必要に応じてこれらの方法を使用して、ビデオプレイヤーをカスタマイズしてください。