본문 바로가기

HTML5

W3Schools HTML5 튜토리얼 (한글) -4

W3Schools HTML5 튜토리얼

HTML5 홈
HTML5 소개
HTML5 새 엘리먼트 (Elements)
HTML5 비디오 (Video)
HTML5 비디오/Dom (Video/DOM)
HTML5 오디오 (Audio)
HTML5 캔버스 (Canvas)
HTML5 웹 저장공간 (Web Storage)

HTML5 폼 (Forms)

HTML5 입력타입 (Input Types)
HTML5 폼 엘리먼트 (Form Elements)
HTML5 폼 속성 (Form Attributes)

HTML5 참조목록 (Reference)

HTML5 태그 (Tags)
HTML5 속성 (Attributes)
HTML5 이벤트 (Events)
HTML5 2D 캔버스 (Canvas 2d)
HTML 유효 DTD (Valid DTDs)




요즘 많은 수의 웹사아트들은 비디오를 보여줍니다. HTML5는 이를 위한 표준을 제공합니다.
 

당신의 브라우저가 HTML5 비디오를 지원하는지 확인하세요



웹에서의 비디오

현재까지 웹페이지에서 비디오/무비를 재생하는 표준은 없습니다.

오늘날 대부분의 비디오는 플래시와 같은 플러그인으로 보여집니다. 하지만 브라우저마다 다른 플러그인이 필요합니다.

HTML5는 웹페이지안에 비디오/무비를 내장하기위한 표준을 새 엘리먼트에 정의했습니다: <video> 엘리먼트.



어떻게 작동하나요

이것만으로 HTML5로 비디오를 볼수있습니다.:

예제

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

직접 해보기 »

재생, 멈춤, 볼륨등의 비디오 제어를 위한 제어속성들이 추가되었습니다.

폭과 넓이 속성을 항상 포함시키는게 좋습니다. 폭과 넢이를 정하면 비디오에서 사용될 공간이 페이지 로딩시에 할당되기때문입니다. 하지만 이 속성값들이 없다면 브라우저는 비디오의 사이즈를 알수가 없으므로 적절한 공간을 할당할수없습니다. 이것은 비디오가 로딩될 때 페이지의 레이아웃이 바뀌어 버리는 결과를 가져올수도 있습니다.

당신은 <video> 엘리먼트를 지원하지않는 브라우저를 위해 <video>와 </video>태그 사이에 자막컨탠츠를 삽입해야합니다.

<video> 엘리먼트는 여러개의 서로 다른 비디오 파일을 링크할수있게 복수개의 <source> 엘리먼트를 허용합니다. 브라우저는 맨처음 인식한 비디오 포맷을 사용할 것 입니다.


비디오 포맷과 지원하는 브라우저

현재 3가지 비디오 포맷인 <video> 엘리먼트에서 지원됩니다: MP4, WebM, 그리고 Ogg:

브라우저MP4WebMOgg
인터넷 익스플로러 9 지원 비지원 비지원
파이어폭스 4.0 비지원 지원 지원
구글 크롬 6 지원 지원 지원
애플 사파리 5 지원 비지원 비지원
오페라 10.6 비지원 지원 지원
  • MP4 = H264 비디오 코덱과  AAC 오디오 코덱을 사용하는 MPEG 4 파일 
  • WebM =  VP8 비디오 코덱과 Vorbis 오디오 코덱을 사용하는 WebM 파일
  • Ogg = Theora 비디오 코덱과 Vorbis 오디오 코덱을 사용하는 Ogg 파일



HTML5 비디오 테그

TagDescription
<video> 비디오나 무비를 정의함
<source> <video>나 <audio>와 같은 미디어 엘리먼트를 위한 복수개의 미디어 리소스를 정의함
<track> 미디어 플레이어내의 자막을 정의함