<source>

動画や音声などのメディアのソースを示します

<video width="320" height="240" controls>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

説明

<source> タグは HTML5 で追加されました。<audio> 要素や <video> 要素内のマルチメディアリソースを定義します。複数のソースを定義することで、帯域の制限やコーデックに応じた選択肢をブラウザに提供することができます。

Note: This is an empty element; it has no closing tag. In XHTML documents, the <source /> syntax is recommended.

Attributes Table

属性 説明
エレメント属性
media メディアクエリを指定します
    src メディアの URL を指定します
      type メディアリソースの形式を指定します
        スタンダード属性
        accesskey 各要素へ移動するキー操作を定義します
        class その要素のクラス名です
        contenteditable 要素が編集可能かを指定します
        contextmenu 要素に対応するメニューを指定します
        dir テキストの方向を指定します
        draggable ドラッグ可能かを指定します
        hidden 要素を隠すかどうかを指定します
        id その要素を識別するための固有の識別子です
        itemprop 要素のマイクロデータプロパティを定義します
        itemscope 要素のマイクロデータグループを作成します
        lang 要素内で使われている言語を指定します
        spellcheck 要素のスペルチェックを制御します
        style CSS スタイルを記述します
        subject マイクロデータプロパティを関連付けます
        tabindex Tab キーによってフォーカスが移動する順番を指定します
        title この要素に補足情報を足します
        translate 要素のコンテンツの翻訳ツールを設定します
        xml:lang 要素内で使われている言語を指定します

        DOM リファレンス

        ハンドラ 説明
        イベントハンドラ
        onchange 属性値の変更時に実行されます
        onclick 要素のクリック時に実行されます
        oncontextmenu コンテキストメニュー使用時に発生するイベント
        ondblclick 要素のダブルクリック時に実行されます
        ondrag 要素のドラッグ時に発生するイベント
        ondragend ドラッグ操作の完了時に発生するイベント
        ondragenter 有効なドロップ先への要素のドラッグ操作完了後に発生するイベント
        ondragleave 有効なドロップ先から要素が離れた際に発生するイベント
        ondragover 要素が有効なドロップ先の上に存在している間に発生するイベント
        ondragstart ドラッグ操作の開始時に発生するイベント
        ondrop ドラッグされた要素のドロップ時に発生するイベント
        onfocus 要素のフォーカス時に実行されます
        onformchange フォームの変更時に発生するイベント
        onforminput フォームの入力時に発生するイベント
        oninput ユーザの要素への入力時に発生するイベント
        oninvalid 要素の無効時に発生するイベント
        onkeydown キーボードの打鍵時に実行されます
        onkeypress キーボードを打鍵し放された際に実行されます
        onkeyup キーが放された際に実行されます
        onmousedown マウスボタンの押下時に実行されます
        onmousemove マウスポインタの移動時に実行されます
        onmouseout 要素からマウスポインタが離れた際に実行されます
        onmouseover 要素へマウスポインタが合った際に実行されます
        onmouseup マウスボタンが放された際に実行されます
        onmousewheel マウスホイールの使用時に発生するイベント
        onreset フォームのリセット時に実行されます
        onscroll 要素のスクロール時に発生するイベント
        onselect 要素の選択時に実行されます
        onsubmit フォームの送信時に実行されます
        メディアイベントハンドラ
        onabort メディアの読込が不正終了した際に発生するイベント
        oncanplay メディアが再生を開始できる際に発生するイベント
        oncanplaythrough メディアが最後まで再生した際に発生するイベント
        ondurationchange メディアの変更中に発生するイベント
        onemptied メディアのリソースが空の際に発生するイベント
        onended メディアの再生が最後に達した際に発生するイベント
        onerror 要素の読込中にエラーが起こった際に発生するイベント
        onloadeddata メディアのリソースが読み込まれた際に発生するイベント
        onloadedmetadata メディアのメタデータが読み込まれた際に発生するイベント
        onloadstart メディアの読込が開始された際に発生するイベント
        onpause メディアが一時停止された際に発生するイベント
        onplay メディアが再生される直前に発生するイベント
        onplaying メディアの再生中に発生するイベント
        onprogress ブラウザが追加のメディアデータを受け取った際に発生するイベント
        onratechange メディアの再生レートが変更された際に発生するイベント
        onreadystatechange メディアの待機状態が変更された際に発生するイベント
        onseeked メディアリソースのシーク時に発生するイベント
        onseeking メディアのシーク時に発生するイベント
        onstalled メディアの読込が停止した際に発生するイベント
        onsuspend メディアの終了前にブラウザが情報の取得を停止した際に発生するイベント
        ontimeupdate メディアの再生位置を変更した際に発生するイベント
        onvolumechange メディアのボリュームを変更した際に発生するイベント
        onwaiting メディアの再生を停止し、再開させる場合に発生するイベント