お問い合わせ

source要素

source要素はHTML5から新たに追加された要素です。
picture要素 や、 audio要素 、 video要素 に対し、複数のリソースを指定する場合に用います。

使用例

後述するコード断片は、次に列挙するリストの順にリソースの埋め込みを試みる使用例です。

  1. webm形式の埋め込みを試みる
  2. webm形式に対応していない環境だった場合、ogg形式の埋め込みを試みる
  3. ogg形式に対応していない環境だった場合、mov形式の埋め込みを試みる
  4. mov形式に対応していない環境だった場合、mp4形式の埋め込みを試みる
  5. mp4形式に対応していない環境だった場合、代替テキストを表示する 
<video controls>

<source src="dummy.webm" type="video/webm">

<source src="dummy.ogg" type="video/ogg">

<source src="dummy.mov" type="video/mov">

<source src="dummy.mp4" type="video/mp4">

<track kind="subtitles" src="dummy.en.vtt" srclang="ja" lang="en" label="Japanese">

<track kind="subtitles" src="dummy.en.vtt" srclang="en" lang="en" label="English">

<track kind="subtitles" src="dummy.fr.vtt" srclang="fr" lang="en" label="French">

<track kind="subtitles" src="dummy.de.vtt" srclang="de" lang="en" label="German">

<p>video要素がサポートされているブラウザで閲覧してください。</p>

</video>

使用可能な属性

  • すべてのグローバル属性
  • src
  • type
  • srcset
  • sizes
  • media

コンテンツカテゴリ

  • なし

子要素にしていい要素の種類

  • 空要素のため子要素は存在しません

親要素にしていい要素の種類

  • picture要素
    • ただし、img要素の前
  • メディア要素（ audio要素 や video要素 ）
    • ただし、任意のフローコンテンツまたはtrack要素の前

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard

最終更新：2017年9月5日

一覧へ戻る

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

ミツエーリンクスのサービス一覧

関連情報