WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <source>「動画、音声のリソース再生候補」

<source> 「動画、音声のリソース再生候補」[読み方:ソース]

<source>タグは、<audio>タグや<video>タグのリソース再生候補を指定します。
2013年4月時点では、ブラウザにより使用できるファイル属性(拡張子)が異なりますので注意が必要です。

HTML規格HTML4.01HTML5
使用可否×
<source>は、HTML5で追加されたタグです
ブラウザ別の対応状況
下記サイトで確認できます。
「Can I use」(英語のサイトです)
広告

<source> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
<audio><video>内で
フローコンテンツ、<track>より前に指定
終了タグ無

<source> の属性

【構文】
<source src="動画、音声ファイル" type="MIMEタイプ" media="メディア">
</source>
属性意味値のサンプルなど
src="動画、音声ファイル名"動画、音声のファイル名【必須】「sample.mp4」
「sample.webm」
「sample.ogg」
「sample.mp3」など
拡張子:「.mp4」「.ogv」「.webm」「.mp3」「.ogg」「m4a」
type="MIMEタイプ"動画、音声ファイルのMIMEタイプ「video/webm」
media="メディアタイプ"動画、音声ファイルを適用するメディアタイプ
※デフォルト=all
「screen」
「print」
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<source>タグのサンプル

「audio」のサンプル
<audio controls>
<source src="se_maoudamashii_onepoint03.mp3"type="audio/mp3">
<source src="se_maoudamashii_onepoint04.ogg"type="audio/ogg">
<p style="color:red">HTML5のaudioに対応していないブラウザのためサンプルは表示されません。</p>
</audio>
音源は魔王魂様よりダウンロードし利用させていただいています。

「video」のサンプル
<video autoplay controls width="300"height="250">
<source src="e23.webm" type="video/webm">
<source src="e23.mp4" type="video/mp4">

<p><a href="e23.mp4">動画ファイルを保存後に再生してください。</a></p>
</video>

動画:kawacho様よりダウンロードし利用させていただいています。

ページTOP

留意事項

  • ブラウザにより対応している動画ファイルは異なります。
    通常は<source>で複数の音種類を指定することで、各種ブラウザに対応します。
    <source>を複数指定した場合、先頭が優先でブラウザに対応したファイルが選択されます。
  • <video>タグ、<audio>タグで、"src属性"を指定した場合、<source>タグは無視されます。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン