path: root/files/ko/web/html/element/video/index.html

---
title: '<video>: 비디오 삽입 요소'
slug: Web/HTML/Element/Video
tags:
  - Element
  - HTML
  - HTML embedded content
  - Media
  - Multimedia
  - Reference
  - Web
  - 동영상
  - 비디오
translation_of: Web/HTML/Element/video
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML <code>&lt;video&gt;</code> 요소</strong>는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.</span> 오디오 콘텐츠에도 사용할 수 있으나, {{htmlelement("audio")}} 요소가 사용자 경험에 좀 더 적합합니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p>위 예제는 <code>&lt;video&gt;</code> 요소의 간단한 사용법을 보입니다. <code>&lt;video&gt;</code> 또한 {{htmlelement("img")}} 요소와 비슷하게, 표시하고자 하는 미디어로의 경로를 <code>src</code> 특성에 제공합니다. 또한 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 특성을 통해 지정할 수 있습니다.</p>

<p><code>&lt;video&gt;&lt;/video&gt;</code> 태그 안의 콘텐츠는 브라우저가 <code>&lt;video&gt;</code> 요소를 지원하지 않을 때 보여집니다.</p>

<h2 id="Attributes" name="Attributes">특성</h2>

<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>

<dl>
 <dt>{{htmlattrdef("autoplay")}}</dt>
 <dd>부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다.</dd>
 <dt>{{htmlattrdef("buffered")}}</dt>
 <dd>미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 {{domxref("TimeRanges")}} 객체를 포함합니다.</dd>
 <dt>{{htmlattrdef("controls")}}</dt>
 <dd>이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.</dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are:
 <dl>
  <dt>anonymous</dt>
  <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted..</dd>
  <dt>use-credentials</dt>
  <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd>
 </dl>
 When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for additional information.</dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.</dd>
 <dt>{{htmlattrdef("loop")}}</dt>
 <dd>부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.</dd>
 <dt>{{htmlattrdef("muted")}}</dt>
 <dd>비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.</dd>
 <dt>{{htmlattrdef("played")}}</dt>
 <dd>재생된 동영상 영역을 나타내는 {{domxref("TimeRanges")}} 객체 입니다.</dd>
 <dt>{{htmlattrdef("preload")}}</dt>
 <dd>이 속성은 저작자가 생각하는 가장 좋은 사용자 경험이 어떠한 것인지 브라우저에 미리 정보를 알려주는 용도록 사용됩니다. 다음 값들 중 하나를 가질 수 있습니다:
 <ul>
  <li><span style="font-family: courier new;">none: </span>저작자가 생각하기에 사용자가 비디오를 보지 않거나 서버가 최소한의 트래픽을 유지하고자 함을 의미합니다. 다시 말해서 비디오가 캐시되지 않아야 함을 의미합니다.</li>
  <li><span style="font-family: courier new;">metadata</span>: 저작자가 생각하기에 사용자가 비디오를 보지 않을 수도 있지만 메타데이터(예를 들어서 길이)를 미리 가져오는 것은 합리적임을 의미합니다.</li>
  <li><span style="font-family: courier new;">auto</span>: 사용자가 우선순위를 가지고 있음을 의미합니다. 다시 말해서 사용자가 이를 사용하지 않을 지라도 필요하다면 전체 비디오가 다운로드 될 수 있음을 의미합니다.</li>
  <li><em>빈 문자열</em>: <span style="font-family: courier new;">auto </span>와 동일합니다.</li>
 </ul>

 <p>스펙에서는 기본값으로 <span style="font-family: courier new;">metadata</span>를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다.</p>

 <div class="note"><strong>사용 정보:</strong>

 <ul>
  <li>비디오를 자동으로 재생하려 한다면 브라우저가 이를 다운로드 해야 하기 때문에 <code>autoplay</code>이 이 속성보다 우선시 됩니다. <code>autoplay</code> 속성과 <code>preload</code> 속성을 둘 다 설정하는 것은 스펙상 가능합니다.</li>
  <li>브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("poster")}}</dt>
 <dd>사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 {{HTMLElement("source")}} 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.</dd>
</dl>

<h2 id="Examples" name="Examples">이벤트</h2>

<p><code>&lt;video&gt;</code> 요소는 많은 <a href="/en-US/docs/Web/Guide/Events/Media_events">이벤트</a>를 발생시킬 수 있습니다.</p>

<h2 id="Examples" name="Examples">예제</h2>

<pre class="brush: html  language-html"><code class="language-html"><span class="comment token">&lt;!-- Simple video example --&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>video</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>videofile.ogg<span class="punctuation token">"</span></span> <span class="attr-name token">autoplay</span> <span class="attr-name token">poster</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>posterimage.jpg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  Sorry, your browser doesn't support embedded videos,
  but don't worry, you can <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>videofile.ogg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>download it<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span>
  and watch it with your favorite video player!
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>video</span><span class="punctuation token">&gt;</span></span>

<span class="comment token">&lt;!-- Video with subtitles --&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>video</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.ogg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>track</span> <span class="attr-name token">kind</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>subtitles<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.en.vtt<span class="punctuation token">"</span></span> <span class="attr-name token">srclang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>English<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>track</span> <span class="attr-name token">kind</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>subtitles<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.sv.vtt<span class="punctuation token">"</span></span> <span class="attr-name token">srclang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sv<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Svenska<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>video</span><span class="punctuation token">&gt;</span></span></code></pre>

<p>첫번째 예제는 동영상을 더 다운받기 위해서 멈추지 않아도 될 정도로 영상이 다운로드 되면 바로 영상이 재생됩니다. 동영상이 재생되기 전까지 "posterimage.jpg" 이미지가 표현됩니다.</p>

<p>두번째 예제에서는 사용자가 서로다른 자막을 선택할 수 있습니다.</p>

<h2 id="Server_support" name="Server_support">서버 지원</h2>

<p>동영상 MIME 타입이 올바르게 설정되어 있지 않다면 동영상이 보이지 않거나 X표시가 된 회색 박스가 나오게 됩니다(JavaScript가 활성화 된 경우).</p>

<p>Ogg Theora 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".ogm", ".ogv", ".ogg"를 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/ogg" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.</p>

<pre>AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
</pre>

<p>WebM 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".webm"을 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/webm" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.</p>

<pre>AddType video/webm .webm
</pre>

<p>여러분의 웹 호스트에서 새로운 기술이 범용적으로 적용되어 업데이트 되기 전까지 편하게 MIME 타입을 설정하는 인터페이스를 제공할지도 모릅니다.</p>

<h2 id="DOM_interface" name="DOM_interface">DOM 인터페이스</h2>

<p>이 요소는 <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code> 인터페이스를 구현하고 있습니다.</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>



<p>{{Compat("html.elements.video")}}</p>

<h2 id="See_also" name="See_also">참고</h2>

<ul>
 <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
 <li>{{htmlelement("audio")}}</li>
 <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Using HTML5 audio and video</a></li>
 <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li>
 <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="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 HTML5.</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> (HTML5 specification)</li>
 <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Configuring servers for Ogg media</a></li>
</ul>