controls 属性コントロールを表示する

controls 属性は audio 要素video 要素に指定することで音声や動画ファイルの再生をコントロールするインタフェースを表示させます。この表示はブラウザに依存します。controls 属性は論理属性です。

Google Chrome 27、Firefox 21 での表示例

Google Chrome 27 (上)、Firefox 21 (下) で controls 属性を指定した場合に表示されるインタフェースの例を下記に挙げます。

controls 属性で表示したインタフェースの例。上が Google Chrome 27、下が Firefox 21

サンプルソースを見る

controls 属性の仕様

この属性を使用できる要素

controls 属性のサンプルソース

<audio src="/sample.mp4" controls="controls">
 <p>
  サンプルが視聴できます。ブラウザで再生できない場合は、下記からダウンロードしてご試聴ください。
  <a href="/sample.mp3" type="audio/mp3">ファイルのダウンロードはこちら(MP3 / 1.2MB)</a>
 </p>
</audio>
<!-- HTML 文書においては下記のような指定もできます -->
<audio src="/sample.mp4" controls>
 <p>
  サンプルが視聴できます。ブラウザで再生できない場合は、下記からダウンロードしてご試聴ください。
  <a href="/sample.mp3" type="audio/mp3">ファイルのダウンロードはこちら(MP3 / 1.2MB)</a>
 </p>
</audio>

W3C HTML5 仕様書

The controls attribute