mozilla

Revision 290479 of source 要素

  • リビジョンの URL スラグ: HTML/Element/Source
  • リビジョンのタイトル: source 要素
  • リビジョンの ID: 290479
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

概要

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

使用可能な場所

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

属性

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

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

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

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

DOM インターフェース

この要素は HTMLSourceElement インターフェースを具えます。

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

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

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>

その他の例については、Firefox でのオーディオとビデオの使用 を参照して下さい。

ブラウザ毎の互換性

{{ CompatibilityTable() }}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} 9.0 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
media 属性 {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("15.0") }} {{ CompatUnknown() }} {{ 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-specific notes") }}Gecko 固有の注意事項

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

{{ HTML:Element_Navigation() }}
{{ languages({ "en-US":"en-US/docs/HTML/Element/source", "ja":"ja/docs/HTML/Element/source" }) }}

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

<h2 id=".E6.A6.82.E8.A6.81">概要</h2>
<p><code>source</code> 要素は HTML5 文書における <code>audio</code> 要素及び <code>video</code> 要素に対し、<a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">各ブラウザ毎にサポートの異なる複数のメディア形式</a> を指定する場合に用います。この要素自体は空要素です。</p>


<h2 id=".E4.BD.BF.E7.94.A8.E5.8F.AF.E8.83.BD.E3.81.AA.E5.A0.B4.E6.89.80">使用可能な場所</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/video.html#the-source-element" title="http://www.w3.org/TR/html5/video.html#the-source-element">HTML5, section 4.8.8</a></td>
    </tr>
  </tbody>
</table>


<h2 id=".E5.B1.9E.E6.80.A7">属性</h2>
<p>他の全ての要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes" title="ja/docs/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 class="internal" href="/ja/docs/CSS/Media_queries" title="ja/docs/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_.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9">DOM インターフェース</h2>
<p>この要素は <code><a href="/ja/docs/DOM/HTMLSourceElement" title="ja/docs/DOM/HTMLSourceElement">HTMLSourceElement</a></code> インターフェースを具えます。</p>


<h2 id=".E4.BE.8B">例</h2>
<p>次の例は、Ogg 形式をサポートしたブラウザと QuickTime ビデオ形式を再生可能な環境を想定した記述例となります。</p>

<p>video 要素自体がブラウザでサポートされていない場合、代わりにメッセージが表示されます。</p>
<p>video 要素はサポートしていても指定した形式の全てが再生不可である場合は、エラーイベントが発生し、(有効な場合は)既定のメディアコントロール・エラーが示されます。各主要ブラウザのサポート形式については <a href="/ja/docs/Media_formats_supported_by_the_audio_and_video_elements" title="ja/docs/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;
  I'm sorry; your browser doesn't support HTML5 video.
&lt;/video&gt;
</pre>
<p>その他の例については、<a class="internal" href="/ja/docs/Using_HTML5_audio_and_video" title="ja/docs/Using audio and video in Firefox">Firefox でのオーディオとビデオの使用</a> を参照して下さい。</p>

<h2 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E6.AF.8E.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7">ブラウザ毎の互換性</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>{{ CompatUnknown() }}</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='{{_.E8.8B.B1.E8.AA.9E.E7.89.88.E7.AB.A0.E9.A1.8C("Gecko-specific_notes")_}}Gecko_.E5.9B.BA.E6.9C.89.E3.81.AE.E6.B3.A8.E6.84.8F.E4.BA.8B.E9.A0.85'>{{ 英語版章題("Gecko-specific notes") }}Gecko 固有の注意事項</h3>
<p>現在、全機能のうちの小さなサブセットのみが実装されています(Gecko は、<a href="/ja/docs/Media_formats_supported_by_the_audio_and_video_elements" title="ja/docs/Media formats supported by the audio and video elements">サポートされているメディア形式の MINE-type</a> と一致する形式を持つ最初のリソースしか選択しません)<br>
  詳細については {{ bug(449363) }} を参照して下さい。</p>


<div>{{ HTML:Element_Navigation() }}</div>


<div>{{ languages({ "en-US":"en-US/docs/HTML/Element/source", "ja":"ja/docs/HTML/Element/source" }) }}</div>
このリビジョンへ戻す