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

HTMLで動画の音声をミュートに設定する方法｜muted属性の使い方を解説

HTML5では、muted属性を使用することで、動画の音声出力をミュート（無音）状態に設定できます。この属性は<video>要素に指定でき、ページの読み込み時に自動的に音声をオフにした状態で再生されます。

実装例

以下のコードを実行して、muted属性の動作を実際に確認してみてください。

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" controls muted>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         お使いのブラウザはvideo要素をサポートしていません。
      </video>
   </body>
</html>

ポイント解説

  • muted属性はブール型属性のため、タグ内に記述するだけで有効になります（値の指定は不要です）。
  • 複数の<source>要素を指定すると、ブラウザが対応している形式（OGGやMP4など）が自動的に選択され、幅広い環境で再生できます。
  • <video>要素内のテキストはフォールバック用の代替コンテンツで、ブラウザがvideo要素に非対応の場合にのみ表示されます。
  • controls属性と組み合わせることで、ユーザーが後から手動で音量を調整できるようになります。
  1. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動

  2. HTML DOM Video mutedプロパティとは？使い方をサンプルコード付きで解説

    HTML DOMのmutedプロパティは、<video>要素の音声がミュートされているかどうかを示すブール値（true / false）を取得・設定できるプロパティです。動画プレイヤーにミュート機能を実装したい場合などに活用できます。mutedプロパティの構文構文は以下のとおりです。ブール値を取得する場合（true / false）mediaObject.mutedミュート状態を設定する場合mediaObject.muted = booleanValuebooleanValueには、次のいずれかの値を指定します。booleanValue説明true動画の音声がミュートされることを表