【HTML】controls属性で動画と音楽の操作ツールを表示する

このページについて

このページではHTMLで使えるcontrols属性の使い方を解説しています。

controlsはaudioタグとvideoタグの2種類で使うことができます。このcontrolsはブール値といって、書いたら有効になり、書かなかったら無効になるというシンプルな構造になっています。書く位置はそれぞれのタグの中に入れます。

<audio controls>
<source src="オーディオ1" type="audio/ogg">
<source src="オーディオ1" type="audio/ogg">
</audio>

videoタグで使う場合でも書く位置は変わりません。

controlsは再生ボタン・シークバーが表示され、再生を開始すると一時停止ボタンに変わります。あとはボリューム調整ができます。以下はオーディオファイルなどは何も指定していないので実際に再生などは行えませんが、こういうのが出てくるよっていうやつです。

↓はvideoタグで使った場合のプレビューです。

autoplay属性で自動再生を有効にしても良いと思いますが、その場合はユーザーにとって不要な場合に即座に止めることができるように、controlsは使用した方が良いと思います。というより自動再生は喜ばれる場面が無いので極力やらない方がいいとは思います。

controlsはaudioタグとvideoタグで使うことができます。再生/一時停止と、シークバー、音量操作が行えるツールバーが表示されるようになります。