Revision 119146 of Video

  • Revision slug: HTML/Element/Video
  • Revision title: Video
  • Revision id: 119146
  • Created:
  • Creator: Suguni
  • Is current revision? No
  • Comment 211 words added, 256 words removed

Revision Content

{{ gecko_minversion_header("1.9.1") }}

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

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

속성

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

autoplay
부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다.
autobuffer
부울(boolean) 속성. 이 값이 설정되면, 자동 재생으로 설정되어 있지 않더라도, 버퍼링을 자동으로 시작합니다(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). 동영상은 미디어 캐쉬가 가득차기 전까지 버퍼에 저장됩니다.
controls
이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.
height
비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.
loop {{ unimplemented_inline() }} {{ bug("449157") }}
부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.
poster {{ gecko_minversion_inline("1.9.2") }}
사용자가 동영상을 재생하거나 탐색(seek)하기 전까지 출력되는 포스터(poster) 프레임 주소(url) 입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터(poster) 프레임으로 출력합니다.
src
삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 source 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.
width
비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.

시간 오프셋(time offset)은 현재 초 단위의 실수 값으로 명시됩니다.

참고: HTML 5 명세서에서 시간 오프셋(time offset) 값에 대한 정의는 아직 완료되지 않은 상태라, 이후 변경될 수 있습니다.

예제

<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>부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다.</dd> <dt>autobuffer</dt> <dd>부울(boolean) 속성. 이 값이 설정되면, 자동 재생으로 설정되어 있지 않더라도, 버퍼링을 자동으로 시작합니다(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). 동영상은 미디어 캐쉬가 가득차기 전까지 버퍼에 저장됩니다.</dd> <dt>controls</dt> <dd>이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.</dd> <dt>height</dt> <dd>비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.</dd> <dt>loop {{ unimplemented_inline() }} {{ bug("449157") }}</dt> <dd>부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.</dd> <dt>poster {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>사용자가 동영상을 재생하거나 탐색(seek)하기 전까지 출력되는 포스터(poster) 프레임 주소(url) 입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터(poster) 프레임으로 출력합니다.</dd> <dt>src</dt> <dd>삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 <a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.</dd> <dt>width</dt> <dd>비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.</dd>
</dl>
<p>시간 오프셋(time offset)은 현재 초 단위의 실수 값으로 명시됩니다.</p>
<div class="note"><strong>참고:</strong> HTML 5 명세서에서 시간 오프셋(time offset) 값에 대한 정의는 아직 완료되지 않은 상태라, 이후 변경될 수 있습니다.</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