Revision 133560 of video 要素

  • Revision slug: HTML/Element/Video
  • Revision title: Video
  • Revision id: 133560
  • Created:
  • Creator: RobinEgg
  • Is current revision? No
  • Comment 6 words added

Revision Content

{{ outdated() }}

{{ gecko_minversion_header("1.9.1") }}

video 要素は HTML もしくは XHTML 文書に映像コンテンツを埋め込むために用いられます。 video 要素は HTML 5 の一部として導入されました。

  • 要素型: block-level
  • 許可された内部コンテンツ: 代替テキスト
注意: 現在、 Firefox が対応しているのは Ogg コンテナ中の Theora フォーマットの映像データに限られます。また、 Firefox がこれらのコンテンツを正常に再生するためには、サーバーから送信されるデータが適切な MIME タイプで指定されていなければなりません。

属性

Firefox はいくつかの属性にはまだ対応できていないことに注意してください。

autoplay
ブール型。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
controls
この属性が指定された場合、再生・一時停止、音量、シーク、ポーズの各機能を制御するコントロールを表示します。
height
映像の表示領域の高さを指定します。 CSS ピクセルで指定します。
loop {{ unimplemented_inline() }} {{ bug("449157") }}
ブール型。この属性が指定された場合、コンテンツの終端に達すると自動的に先頭位置に戻ります。
poster {{ unimplemented_inline() }} {{ bug("449156") }}
映像データが利用不可能な場合に表示される画像データを URI 形式で指定します。この属性が指定されない場合、再生可能な映像データがない場合は何も表示されません。
src
埋め込む映像コンテンツへの URL を指定します。
width
映像の表示領域の幅を指定します。 CSS ピクセルで指定します。

先頭からの経過時間(秒)は浮動小数点型(float)で指定します。

注意: 先頭からの経過時間については、まだ HTML 5 での定義が完了していないため、今後仕様が変更される恐れがあります。

<video src="videofile.ogg" autoplay>
  Your browser does not support the <code>video</code> element.
</video>

この例では、データのダウンロードのために再生途中に一時停止する必要がない程度までデータを受信できると、自動的に再生が始まります。

参考資料

{{ languages( { "en": "en/HTML/Element/video" }, { "fr": "fr/HTML/Element/video" } ) }}

Revision Source

<div>{{ outdated() }}</div> <p>{{ gecko_minversion_header("1.9.1") }}</p>
<p><code>video</code> 要素は HTML もしくは XHTML 文書に映像コンテンツを埋め込むために用いられます。 <code>video</code> 要素は HTML 5 の一部として導入されました。</p>
<ul> <li>要素型: <a class="internal" href="/en/HTML/Block-level_elements" title="en/HTML/Block-level elements">block-level</a></li> <li>許可された内部コンテンツ: 代替テキスト</li>
</ul>
<div class="note"><strong>注意:</strong> 現在、 Firefox が対応しているのは Ogg コンテナ中の Theora フォーマットの映像データに限られます。また、 Firefox がこれらのコンテンツを正常に再生するためには、サーバーから送信されるデータが適切な MIME タイプで指定されていなければなりません。</div>
<h2 id=".E5.B1.9E.E6.80.A7">属性</h2>
<p>Firefox はいくつかの属性にはまだ対応できていないことに注意してください。</p>
<dl> <dt>autoplay</dt> <dd>ブール型。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。</dd> <dt>controls</dt> <dd>この属性が指定された場合、再生・一時停止、音量、シーク、ポーズの各機能を制御するコントロールを表示します。</dd> <dt>height</dt> <dd>映像の表示領域の高さを指定します。 CSS ピクセルで指定します。</dd> <dt>loop {{ unimplemented_inline() }} {{ bug("449157") }}</dt> <dd>ブール型。この属性が指定された場合、コンテンツの終端に達すると自動的に先頭位置に戻ります。</dd> <dt>poster {{ unimplemented_inline() }} {{ bug("449156") }}</dt> <dd>映像データが利用不可能な場合に表示される画像データを URI 形式で指定します。この属性が指定されない場合、再生可能な映像データがない場合は何も表示されません。</dd> <dt>src</dt> <dd>埋め込む映像コンテンツへの URL を指定します。</dd> <dt>width</dt> <dd>映像の表示領域の幅を指定します。 CSS ピクセルで指定します。</dd>
</dl>
<p>先頭からの経過時間(秒)は浮動小数点型(float)で指定します。</p>
<div class="note"><strong>注意:</strong> 先頭からの経過時間については、まだ HTML 5 での定義が完了していないため、今後仕様が変更される恐れがあります。</div>
<h2 id=".E4.BE.8B">例</h2>
<pre class="brush: html">&lt;video src="videofile.ogg" autoplay&gt;
  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
&lt;/video&gt;
</pre>
<p>この例では、データのダウンロードのために再生途中に一時停止する必要がない程度までデータを受信できると、自動的に再生が始まります。</p>
<h2 id=".E5.8F.82.E8.80.83.E8.B3.87.E6.96.99">参考資料</h2>
<ul> <li><code><a class="internal" href="/ja/HTML/Element/Audio" title="Ja/HTML/Element/Audio">audio</a></code></li> <li><code><a class="internal" href="/ja/HTML/Element/Source" title="Ja/HTML/Element/Source">source</a></code></li> <li><a class="internal" href="/Ja/Using_HTML5_audio_and_video" title="Ja/Using audio and video in Firefox">Using audio and video in Firefox</a></li> <li><a class="internal" href="/Ja/Manipulating_video_using_canvas" title="Ja/Manipulating video using canvas">Manipulating video using canvas</a></li> <li><code>{{ interface("nsIDOMHTMLMediaElement") }}</code></li> <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - examples using ogg files in HTML 5.</li> <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video"><code>video</code> - HTML 5 Specification</a></li>
</ul>
<p>{{ languages( { "en": "en/HTML/Element/video" }, { "fr": "fr/HTML/Element/video" } ) }}</p>
Revert to this revision