mozilla

Revision 119145 of Video

  • Revision slug: HTML/Element/Video
  • Revision title: Video
  • Revision id: 119145
  • Created:
  • Creator: Suguni
  • Is current revision? No
  • Comment page created, 586 words added

Revision Content

{{ gecko_minversion_header("1.9.1") }}

비디오(video) 요소는 HTML 또는 XHTML 문서에 비디오 컨텐츠를 포함시키기 위해 사용되며, HTML 5의 일부입니다.

  • 요소 유형: 블럭 레벨(block-level)
  • 허용 컨텐츠: 대체 텍스트
참고: 현재 Gecko는 Ogg 컨테이너에 포함된 Theora 비디오 만을 지원합니다. 또한 Gecko가 비디오를 정상적으로 재생시키기 위해서는, 서버에서 올바른 MIME type으로 파일을 제공해야 합니다.

속성

Gecko에서 아직 몇몇 속성들을 지원하지 않는다는 점을 참고하세요.

autoplay
A Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
autobuffer
A Boolean attribute; if specified, the video will automatically begin buffering even if it's not set to automatically play. This should be used for cases in which it is considered likely that the video will be played (for example, if the user navigated to the page specifically to play the video, not if there happens to be a video embedded along with other content). The video is buffered until the media cache is full.
controls
If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
height
The height of the video's display area, in CSS pixels.
loop {{ unimplemented_inline() }} {{ bug("449157") }}
A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.
poster {{ gecko_minversion_inline("1.9.2") }}
A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.
src
The URL of the video to embed. This is optional; you may instead use the source element within the video block to specify the video to embed.
width
The width of the video's display area, in CSS pixels.

Time offsets are currently specified as a float value representing the number of seconds to offset.

Note: The time offset value definition has not yet been completed in the HTML 5 specification and is subject to change.

예제

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

Plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image "posterimage.jpg" is displayed in its place.

서버 확인 사항

It's worth re-emphasizing for the time being, that if the MIME types for Theora video are not set on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

You can fix this problem for the Apache Web Server by adding the extension used by your Theora video files (".ogm", ".ogv", or ".ogg" are the most common ones) to the MIME type "video/ogg" via the "mime.types" file in "/etc/apache" or  via the "AddType" configuration directive in httpd.conf.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.

참고

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

Revision Source

<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>비디오(video) 요소는 HTML 또는 XHTML 문서에 비디오 컨텐츠를 포함시키기 위해 사용되며, 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>현재 Gecko는 Ogg 컨테이너에 포함된 Theora 비디오 만을 지원합니다. 또한 Gecko가 비디오를 정상적으로 재생시키기 위해서는, 서버에서 올바른 MIME type으로 파일을 제공해야 합니다.</div>
<h2>속성</h2>
<p>Gecko에서 아직 몇몇 속성들을 지원하지 않는다는 점을 참고하세요.</p>
<dl> <dt>autoplay</dt> <dd>A Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.</dd> <dt>autobuffer</dt> <dd>A Boolean attribute; if specified, the video will automatically begin buffering even if it's not set to automatically play. This should be used for cases in which it is considered likely that the video will be played (for example, if the user navigated to the page specifically to play the video, not if there happens to be a video embedded along with other content). The video is buffered until the media cache is full.</dd> <dt>controls</dt> <dd>If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.</dd> <dt>height</dt> <dd>The height of the video's display area, in CSS pixels.</dd> <dt>loop {{ unimplemented_inline() }} {{ bug("449157") }}</dt> <dd>A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.</dd> <dt>poster {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.</dd> <dt>src</dt> <dd>The URL of the video to embed. This is optional; you may instead use the <a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> element within the video block to specify the video to embed.</dd> <dt>width</dt> <dd>The width of the video's display area, in CSS pixels.</dd>
</dl>
<p>Time offsets are currently specified as a float value representing the number of seconds to offset.</p>
<div class="note"><strong>Note:</strong> The time offset value definition has not yet been completed in the HTML 5 specification and is subject to change.</div>
<h2>예제</h2>
<pre class="brush: html">&lt;video src="videofile.ogg" autoplay poster="posterimage.jpg"&gt;
  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
&lt;/video&gt;
</pre>
<p>Plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image "posterimage.jpg" is displayed in its place.</p>
<h2>서버 확인 사항</h2>
<p>It's worth re-emphasizing for the time being, that if the MIME types for Theora video are not set on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).</p>
<p>You can fix this problem for the Apache Web Server by adding the extension used by your Theora video files (".ogm", ".ogv", or ".ogg" are the most common ones) to the MIME type "video/ogg" via the "mime.types" file in "/etc/apache" or  via the "AddType" configuration directive in httpd.conf.</p>
<pre>AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
</pre>
<p>Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.</p>
<h2>참고</h2>
<ul> <li><a class="internal" href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the
    audio and video elements">Media formats supported by the audio and video elements</a></li> <li><a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> <li><a class="internal" href="/En/Using_audio_and_video_in_Firefox" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video
    using canvas">Manipulating video using canvas</a></li> <li><a class="internal" href="/En/NsIDOMHTMLMediaElement" title="En/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></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">The <code>video</code> element</a> (HTML 5 specification)</li> <li><a class="internal" href="/en/Configuring_servers_for_Ogg_media" title="en/Configuring servers for Ogg media">Configuring servers for Ogg media</a></li>
</ul>
<p>{{ languages( { "En": "En/HTML/Element/Video", "fr": "fr/HTML/Element/video" } ) }}</p>
Revert to this revision