{{위키데이터 속성 추적}}
{{HTML|image=HTML5 video icon.svg}}
'''HTML5 비디오'''(HTML5 video) 태그는 [[HTML5]] 초안 규격에서 소개된 마크업 언어 태그로 HTML 페이지의 동영상을 임베드(embed)하는 것을 지원해 준다. [[2010년]] 4월, [[어도비 플래시 플레이어]]는 [[유튜브]]와 같은 웹사이트에서 동영상을 포함하는데 널리 사용된다. 이것은 애플의 [[아이폰]]이나 [[아이패드]]와 같은 특정 브라우저를 제외하고는 대다수의 웹 브라우저에 [[어도비 플래시 플레이어]]가 설치되어 있기 때문이다. HTML5 동영상은 동영상 온라인을 보여주기 위한 새로운 표준 방식이 될 예정이었지만, 어떤 동영상 포맷이 동영상 태그에서 지원될 것인지 하는 것에 대한 합의 부족으로 방해를 받아왔다.

== 예제 ==
아래의 HTML5 코드는 [[WebM]] 비디오를 웹 페이지에 포함한다.
<syntaxhighlight lang="html5">
<video src="movie.webm" controls>
브라우저가 비디오 태그를 지원하지 않으면 이 문자열이 나타납니다.
</video>
</syntaxhighlight>

=== 복수 소스 ===
<syntaxhighlight lang="html5">
<video poster="movie.jpg" controls>
	<syntaxhighlight src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"' />
	<syntaxhighlight src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<syntaxhighlight src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
	<p>브라우저가 비디오 태그를 지원하지 않으면 이 문자열이 나타납니다.</p>
</video>
</syntaxhighlight>

== 지원 브라우저 ==
현재의 HTML5 초안 규격에는 동영상 태그에서 어떤 동영상 포맷을 브라우저가 지원해야 할 것인지를 명시해 두지 않았다. 따라서 브라우저는 그들이 적합하다고 생각되는 동영상 포맷을 마음대로 지원할 수 있다.

=== 기본 동영상 포맷 논쟁 ===
브라우저가 지원할 동영상 포맷을 적어도 하나는 명시하는 것이 바람직하다. 이러한 이상적인 동영상 포맷은 다음을 만족하여야 한다.
* 고효율의 압축률과 고화질을 가지고 있고, 낮은 디코드 과정을 사용할 것.
* 로열티가 없을 것.
* 그 포맷을 지원하는 소프트웨어 디코더, 하드웨어 동영상 디코더가 존재할 것.

처음에는 Ogg Theora가 HTML5에서 추천하는 표준 동영상 포맷이었다. 특허에 영향을 받지 않았기 때문이었다. 그러나 [[2007년]] [[12월 10일]] HTML5 규격이 업데이트되었을 때, 포맷을 구체화하기 위해 참고사항이 갱신되었다.

{| class="wikitable" style="width: 100%; text-align: center;"
! rowspan="2" | 브라우저
! rowspan="2" | 최신 안정판 (공개일)
! colspan="4" | 동영상 포맷
|-
! style="width: 15%;" | [[Ogg]] [[테오라|Theora]]
! style="width: 15%;" | [[H.264/AVC|H.264/MPEG-4 AVC]]
! style="width: 15%;" | [[VP8]] ([[WebM]])
! style="width: 15%;" | 기타
|-
! [[인터넷 익스플로러]]
| {{소프트웨어의 최신 버전 (안정판)/인터넷 익스플로러}}
| 수동 설치
| {{yes|9.0}}<ref>[http://technologizer.com/2010/03/16/ie9-platform-preview/ Microsoft Previews the Revamped Internet Explorer 9 Platform]</ref>
| 수동 설치
| {{no}}<ref>[http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx HTML5 Video]</ref>
|-
! [[파이어폭스]]
| {{소프트웨어의 최신 버전 (안정판)/파이어폭스}}
| {{yes|3.5}}<ref>[http://www.mozilla.com/en-US/firefox/3.5/releasenotes/ Mozilla Firefox 3.5 Release Notes]</ref>
| {{yes|21(Windows), 30(Linux)}}
| {{yes|4.0}}
| {{no}}
|-
! [[구글 크롬]]
| {{소프트웨어의 최신 버전 (안정판)/구글 크롬}}
| {{yes|3.0}}
| {{yes}}
| {{yes|6.0}}
| {{no}}
|-
! [[사파리 (웹 브라우저)|사파리]]
| {{소프트웨어의 최신 버전 (안정판)/사파리 (웹 브라우저)}}
| 수동 설치
| {{yes|3.1}}<ref>[http://support.apple.com/kb/TA25197 사파리 3.1 업데이트 내용]</ref><ref>[http://www.macworld.com/article/139285/2009/03/safarihtml5.html 애플이 사파리에서 HTML5 지원을 과시하다!]</ref>
| {{no}}
| 다른 것에 의존{{#tag:ref|OS X의 [[퀵타임]]이 지원하는 모든 포맷.<ref>{{웹 인용 |url=http://webkit.org/blog/140/html5-media-support/ |제목=HTML5 미디어 지원 |확인날짜=2010-05-18 |archive-date=2021-09-04 |archive-url=https://web.archive.org/web/20210904154933/http://webkit.org/blog/140/html5-media-support/ |url-status= }}</ref>}}
|-
! [[오페라 (웹 브라우저)|오페라]]
| {{소프트웨어의 최신 버전 (안정판)/오페라 (웹 브라우저)}}
| {{yes|10.50}}<ref>{{웹 인용 |1= |url=http://my.opera.com/core/blog/2009/12/31/re-introducing-video |제목=(re-)Introducing &lt;video&gt; - Official blog for Core developers at Opera |저자=Philip Jägenstedt |출판사=Opera |날짜=2009-12-31 |보존url=https://web.archive.org/web/20100104205648/http://my.opera.com/core/blog/2009/12/31/re-introducing-video |보존날짜=2010-01-04 |확인날짜=2010-01-02 |url-status=live }}</ref>
| {{no}}
| {{yes|10.60}}
| {{no}}
|-
! [[캉커러]]
| {{소프트웨어의 최신 버전 (안정판)/KDE 소프트웨어 모음 4}}
| {{yes|4.4}}<ref>{{웹 인용 |1= |url=http://www.legendscrolls.co.uk/webstandards/khtml |제목=KHTML Browsers including Konqueror |저자=PeterDavison |출판사=Legend Scrolls |날짜=2010-03-03 |확인날짜=2010-05-18 |보존url=https://web.archive.org/web/20100412155935/http://www.legendscrolls.co.uk/webstandards/khtml |보존날짜=2010-04-12 |url-status=dead }}</ref>
| 다른 것에 의존
| {{yes}}
| 다른 것에 의존{{#tag:ref|[[Qt (툴킷)|Qt]]의 [[포논]]이 지원하는 모든 포맷.<ref>{{웹 인용 |url=http://labs.trolltech.com/blogs/2008/05/13/top-secret-hush-hush/ |제목=Top Secret, Hush Hush! |이름=Tor Arne |성=Vestbø |출판사=Nokia Corporation |날짜=2008-05-13 |확인날짜=2014-10-30 |보존url=https://archive.today/20120709235045/http://labs.qt.nokia.com/2008/05/13/top-secret-hush-hush/ |보존날짜=2012-07-09 |url-status=dead }}</ref>}}
|-
! [[웹 (웹 브라우저)|웹]]
| {{소프트웨어의 최신 버전 (안정판)/웹 (웹 브라우저)}}
| {{yes|2.28}}<ref name="epiphany">{{웹 인용||url=http://www.atoker.com/blog/2007/12/08/html5-media-support-with-gstreamer/ |제목=HTML5 media support with GStreamer |저자=Alp Toker |날짜=2007-12-08}}</ref>
| 다른 것에 의존
| 다른 것에 의존
| 다른 것에 의존{{#tag:ref|에피파니의 웹킷/GTK+ 빌드 상의 [[GStreamer]]가 지원하는 모든 포맷.<ref name="epiphany"/>}}
|-
! [[오리진 웹 브라우저|오리진]]
| [[모르프OS]]용 1.9<br />({{시작 날짜와 나이|2010|08|08}})
| {{yes|모르프OS용 1.7}}
| {{yes|모르프OS용 1.7}}
| {{yes|모르프OS용 1.9}}
| 다른 것에 의존{{#tag:ref|MorphOS의 경우 1.7 버전에서 [[FFmpeg]]가 지원하는 모든 포맷.<ref>{{웹 인용||제목=Origyn Web Browser for MorphOS |url=http://fabportnawak.free.fr/owb/ |출판사=Fabian Coeurjoly |날짜=2010-01-04}}</ref><ref>{{웹 인용||제목=Origyn Web Browser 1.7 Supports HTML5 Media, More |url=http://www.osnews.com/story/22971/Origyn_Web_Browser_1_7_Supports_HTML5_Media_More |출판사=OSNews |저자=Thom Holwerda |날짜=2010-03-08}}</ref>}}
|-
|}

== 같이 보기 ==
* [[HTML5]]

== 각주 ==
{{각주}}

== 외부 링크 ==
* [https://html.spec.whatwg.org/multipage/media.html 동영상 요소]
* [http://dev.opera.com/articles/view/introduction-html5-video/ HTML5 동영상 소개]
* [https://web.archive.org/web/20100307033247/http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2 HTML5 동영상과 음성에 대해 알아야 할 모든 것]
* [http://www.projekktor.com 자바스크립트 HTML5 동영상 Wrapper (GPL)]
* [http://www.mediafront.org/project/osmplayer jQuery HTML5 동영상 플레이어 (GPL)] {{웨이백|url=http://www.mediafront.org/project/osmplayer |date=20100510130815 }}

{{W3C 표준}}
{{웹 인터페이스}}

[[분류:HTML]]
[[분류:HTML5]]