mozilla

Revision 522581 of source 要素

  • リビジョンの URL スラグ: Web/HTML/Element/source
  • リビジョンのタイトル: source 要素
  • リビジョンの ID: 522581
  • 作成日:
  • 作成者: yyss
  • 現行リビジョン はい
  • コメント 英語版 Nov 22, 2013 3:20:50 PM に対応。

このリビジョンの内容

概要

source 要素 (<source />) は HTML5 文書における audio 要素及び video 要素に対し、各ブラウザ毎にサポートの異なる複数のメディア形式 を指定する場合に用います。この要素自体は空要素です。

使用可能な場所

許可された内容 無し。この要素は空要素です。
タグの省略 開始タグは必須。終了タグを記述してはならない。
許可された親要素 {{HTMLElement("audio")}} 要素、 {{HTMLElement("video")}} 要素
標準文書 HTML5, section 4.7.8

属性

他の全ての要素と同様に、この要素はグローバル属性を持ちます。

{{htmlattrdef("src")}}
メディア・リソースのアドレス(必須)
{{htmlattrdef("type")}}
リソースの MIME-type。 必要に応じて codecs パラメーターも共に指定します。 コーデックの指定方法に関する情報については RFC 4281 を参照して下さい。
{{htmlattrdef("media")}}
リソースの意図したメディアのメディア・クエリー

type 属性が指定されていない場合は、サーバーからメディア形式が取得され、Gecko が処理可能な形式であるか確認されます。処理可能な形式である場合はそれが使用され、処理出来ない形式であった場合は次の source 要素が確認されます。 type 属性が指定されている場合は、その指定値が Gecko で再生可能であるか確認されます。また指定値が、認識できない値であった場合は、サーバーは照会さえされず、次の source 要素がチェックされます。

{{訳注("ブラウザの処理を軽減する為に、type 属性は指定しておく方が好ましいといえるでしょう。")}}

DOM インターフェース

この要素は HTMLSourceElement インターフェースを提供します。

次の例は、Ogg 形式をサポートしたブラウザと QuickTime ビデオ形式を再生可能な環境を想定した記述例となります。

audio 要素や video 要素がブラウザでサポートされていない場合、代わりにメッセージが表示されます。

audio 要素や video 要素はサポートしていても指定した形式の全てが再生不可である場合は、エラーイベントが発生し、(有効な場合は)既定のメディアコントロール・エラーが示されます。各主要ブラウザのサポート形式については HTML5 の audio 要素と video 要素でサポートされているメディアフォーマットの一覧を参照して下さい。

<video controls>
  <source src="foo.ogg" type="video/ogg"> <!-- Firefox が採用 -->
  <source src="foo.mov" type="video/quicktime"> <!-- Safari が採用 -->
  I'm sorry; your browser doesn't support HTML5 video.
</video>

その他の例については、『HTML5 の audio 要素と video 要素の利用』の頁を参照して下さい。

ブラウザ実装状況

{{CompatibilityTable()}}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} 9.0 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
media 属性 {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("15.0") }} 9.0 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("1.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
media 属性 {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("15.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko 固有の注意事項

現在、全機能のうちの小さなサブセットのみが実装されています(Gecko は、サポートされているメディア形式の MIME-type と一致する形式を持つ最初のリソースしか選択しません)
詳細については {{bug("449363")}} を参照して下さい。

関連情報

{{HTMLRef}}

このリビジョンのソースコード

<h2 id="Summary" name="Summary">概要</h2>
<p><code>source</code> 要素 (&lt;source /&gt;) は HTML5 文書における <code>audio</code> 要素及び <code>video</code> 要素に対し、<a href="/ja/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">各ブラウザ毎にサポートの異なる複数のメディア形式</a> を指定する場合に用います。この要素自体は空要素です。</p>
<h2 id="Usage_Context" name="Usage_Context">使用可能な場所</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th>許可された内容</th>
   <td>無し。この要素は空要素です。</td>
  </tr>
  <tr>
   <th>タグの省略</th>
   <td>開始タグは必須。終了タグを記述してはならない。</td>
  </tr>
  <tr>
   <th>許可された親要素</th>
   <td>{{HTMLElement("audio")}} 要素、 {{HTMLElement("video")}} 要素</td>
  </tr>
  <tr>
   <th>標準文書</th>
   <td><a class="external" href="http://www.w3.org/TR/html5/embedded-content-0#the-source-element" title="http://www.w3.org/TR/html5/embedded-content-0#the-source-element">HTML5, section 4.7.8</a></td>
  </tr>
 </tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>他の全ての要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p>
<dl>
 <dt>
  {{htmlattrdef("src")}}</dt>
 <dd>
  メディア・リソースのアドレス(必須)</dd>
 <dt>
  {{htmlattrdef("type")}}</dt>
 <dd>
  リソースの MIME-type。 必要に応じて <code>codecs</code> パラメーターも共に指定します。 コーデックの指定方法に関する情報については <a class="external" href="http://www.rfc-editor.org/rfc/rfc4281.txt" title="http://www.rfc-editor.org/rfc/rfc4281.txt">RFC 4281</a> を参照して下さい。</dd>
 <dt>
  {{htmlattrdef("media")}}</dt>
 <dd>
  リソースの意図したメディアの<a href="/ja/docs/CSS/Media_queries" title="CSS/Media queries">メディア・クエリー</a></dd>
</dl>
<p><strong>type</strong> 属性が指定されていない場合は、サーバーからメディア形式が取得され、Gecko が処理可能な形式であるか確認されます。処理可能な形式である場合はそれが使用され、処理出来ない形式であった場合は次の <strong>source</strong> 要素が確認されます。 <strong>type</strong> 属性が指定されている場合は、その指定値が Gecko で再生可能であるか確認されます。また指定値が、認識できない値であった場合は、サーバーは照会さえされず、次の <strong>source</strong> 要素がチェックされます。</p>
<p>{{訳注("ブラウザの処理を軽減する為に、type 属性は指定しておく方が好ましいといえるでしょう。")}}</p>
<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェース</h2>
<p>この要素は <a href="/ja/docs/DOM/HTMLSourceElement" title="DOM/HTMLSourceElement"><code>HTMLSourceElement</code></a> インターフェースを提供します。</p>
<h2 id="Examples" name="Examples">例</h2>
<p>次の例は、Ogg 形式をサポートしたブラウザと QuickTime ビデオ形式を再生可能な環境を想定した記述例となります。</p>
<p><code>audio</code> 要素や <code>video</code> 要素がブラウザでサポートされていない場合、代わりにメッセージが表示されます。</p>
<p><code>audio</code> 要素や <code>video</code> 要素はサポートしていても指定した形式の全てが再生不可である場合は、エラーイベントが発生し、(有効な場合は)既定のメディアコントロール・エラーが示されます。各主要ブラウザのサポート形式については <a href="/ja/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット</a>の一覧を参照して下さい。</p>
<pre class="brush: html">
&lt;video controls&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt; &lt;!-- Firefox が採用 --&gt;
  &lt;source src="foo.mov" type="video/quicktime"&gt; &lt;!-- Safari が採用 --&gt;
&nbsp; I'm sorry; your browser doesn't support HTML5 video.
&lt;/video&gt;
</pre>
<p>その他の例については、『<a href="/ja/docs/Using_HTML5_audio_and_video">HTML5 の audio 要素と video 要素の利用</a>』の頁を参照して下さい。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>機能</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>基本サポート</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
    <td>9.0</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
   </tr>
   <tr>
    <td><code>media</code> 属性</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoDesktop("15.0") }}</td>
    <td>9.0</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>機能</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>基本サポート</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoMobile("1.0") }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
   <tr>
    <td><code>media</code> 属性</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoMobile("15.0") }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko 固有の注意事項</h3>
<p>現在、全機能のうちの小さなサブセットのみが実装されています(Gecko は、<a href="/ja/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">サポートされているメディア形式の MIME-type</a> と一致する形式を持つ最初のリソースしか選択しません)<br />
 詳細については {{bug("449363")}} を参照して下さい。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<div>
 {{HTMLRef}}</div>
このリビジョンへ戻す