HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLにオーディオ・ビデオコントロールを組み込む方法を解説

HTMLで動画や音声ファイルを扱う際、controls属性を指定するだけで、ブラウザ標準の操作パネル（再生・一時停止ボタン、音量調整、シークバーなど）を簡単に表示できます。特別なスクリプトは不要で、属性を1つ追加するだけで実装できるのが魅力です。

controls属性の基本

videoタグまたはaudioタグにcontrolsと記述するだけで、ユーザーがメディアを自由に操作できるようになります。この属性が指定されていない場合、再生ボタンなどは表示されず、自動的に再生されない限りコンテンツを視聴できません。

実装例

以下のコードは、videoタグにcontrols属性を適用したシンプルなサンプルです。実際にブラウザで動作を確認してみてください。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML video Tag</title>
    </head>
    <body>
        <p>Online Compiler</p>
        <br />
        <video width = "500" height = "300" controls>
            <source src = "/html/compileonline.mp4" type = "video/mp4">
            This browser doesn't support video tag.
        </video>
    </body>
</html>

コードのポイント解説

  • width・height属性： 動画の表示サイズをピクセル単位で指定します。
  • sourceタグ： 再生する動画ファイルのパスと形式（type属性）を指定します。
  • フォールバックテキスト： sourceタグ内のテキストは、ブラウザがvideoタグ非対応の場合に表示されます。

補足：audioタグでも同じ要領で使える

controls属性はaudioタグにもそのまま利用できます。例えば<audio src="sample.mp3" controls></audio>のように記述すれば、音声プレイヤーが表示されます。

また、主要なブラウザ（Chrome、Firefox、Safari、Edge）はすべてcontrols属性に対応しているため、互換性を気にせず使用できます。

  1. HTML Webページにオーディオプレーヤーを追加する方法

    HTMLでのオーディオ再生の基本Webページに音声を埋め込むには、HTMLの<audio>要素を使用します。この要素にcontrols属性を追加すると、再生・一時停止・音量調整などができるオーディオプレーヤーがブラウザ上に表示されます。対応している音声フォーマットHTMLの<audio>要素でサポートされている主な音声フォーマットは以下の3つです。MP3（audio/mpeg）― 最も広く使われている形式で、ほぼすべてのブラウザで再生可能Wav（audio/wav）― 非圧縮の高音質形式だが、ファイルサイズが大きくなりがちOgg（audio/ogg）― オープンソースの

  2. HTML DOM Video controlsプロパティの使い方を徹底解説

    HTML DOMのVideo controlsプロパティは、動画に標準のコントロール（再生・一時停止・音量調整など）を表示するかどうかを、ブール値（true/false）で取得または設定するためのプロパティです。構文以下が基本の構文です。値を取得する場合（true/falseが返される）mediaObject.controls値を設定する場合mediaObject.controls = booleanValueここで指定できる「booleanValue」は以下の通りです。booleanValue説明true動画に標準のコントロールが表示されますfalse動画に標準のコントロールは表示されません