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

HTMLでメディアファイルのURLを設定する方法｜src属性の使い方を解説

HTMLでメディアファイルのURLを指定するには、src属性を使用します。「src」は「source（ソース）」の略で、読み込むファイルの場所（パスまたはURL）をブラウザに伝える重要な役割を担っています。

src属性が使用できる要素

src属性は、以下のHTML要素で利用できます。

  • <audio> … 音声コンテンツ
  • <embed> … 外部コンテンツの埋め込み
  • <iframe> … インラインフレーム
  • <img> … 画像
  • <input> … type="image" 指定時の画像ボタン
  • <script> … 外部スクリプトファイル
  • <source> … メディアリソースの指定
  • <track> … 字幕などのテキストトラック
  • <video> … 動画コンテンツ

実装例

実際にsrc属性を使って動画ファイルを読み込むサンプルコードです。以下のコードをそのまま実行して動作を確認できます。

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the video element.
      </video>
   </body>
</html>

コードのポイント

この例では、<video>要素に対してwidthとheightで表示サイズを指定し、controlsで再生コントロールを表示、autoplayで自動再生を有効にしています。

また、<source>要素を複数記述することで、OGG形式とMP4形式の2種類の動画ファイルを指定しています。ブラウザは上から順に対応している形式を探し、再生可能なファイルを自動的に選択します。

さらに、いずれの形式にも対応していない環境向けに、<video>要素内にフォールバック用のテキストを記述しておくことで、ユーザーに適切なメッセージを表示できます。

  1. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

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

  2. HTMLのファイルパスとは？相対パスと絶対パスの違いと指定方法を解説

    ファイルパスとは？ ウェブサイトにおけるファイルパスとは、そのサイト内で目的のファイルがどこにあるかを示す「場所の情報」のことです。HTMLでは、画像・動画・スタイルシート・スクリプトなどの外部ファイルを読み込む際に、このパスをsrc属性などで指定します。 パスの指定方法には、主に次の2種類があります。 相対パス：現在のページの位置（カレントディレクトリ）を基準に、ファイルまでの道筋を指定する方法 絶対パス：ドメイン名を含む完全なURLで、ファイルの場所を直接指定する方法 書式（シンタックス） パスを指定する際の基本的な書き方は以下のとおりです。 1）相対パス src="ImgF