HTML5 비디오 재생하기

HTML5 비디오 재생하기

 

비디오를 삽입하기 위해서는 video 요소를 사용합니다.

 

비디오 재생 형식

형식

<video  src = "비디오 파일 주소"> 지원 불가능한 브라우저에서 표현할 내용 </video>

예제

<video  src = "video.mp4"  controls>           <embed  src = "video.mp4"> </embed> </video>

 

video 요소의 속성

속성	설명
src	재생할 파일 경로를 지정함
autoplay	페이지 로드시 사우드를 재생할지 여부를 지정함
controls	플레이어 표시
loop	반복할 재생 횟수
preload	페이지 로드시 비디오의 로드를 설정함 (none,  auto,  meta)
width	비디오의 너비를 지정함
height	비디오의 높이를 지정함
poster	비디오가 로드되기 전에 보여줄 이미지를 지정함

 

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

브라우저별로 지원하는 확장자가 다르기 때문에 비디오를 재생하기 위해서는 여러 개의 source 요소를 사용할 필요가 있습니다.

코덱을 지정해 주어야 브라우저는 포함되어 있는 미디어를 재생할 수 있는지를 정확하게 판단할 수 있습니다.

 

	익스플로러	파이어폭스	크롬	사파리	오페라
oga,  ogg	X	O	O	X	O
wav,  wma	O	X	O	O	X
mp3	O	X	O	X	O

 

코덱 지정 방법

코덱을 지정하는 방법은 source 요소의 type 속성에 값을 추가해 줍니다.

 type 값 뒤에 세미콜론을 붙인 후 codecs=“코덱” 이라는 형식으로 지정해 줍니다.

 

예제

<video   controls> // mo4 파일 안에 H.265 형식의 영상과 AAC 형식의 음성이 함께 있을 때         <source  src = "video.mp4"  type = "video/mp4;  codecs="avc1.4D401E, mp4a40.2""> </source> // ogg 파일 안에 Theora 형식의 영상과 Vorbis 형식의 음성이 함께 있을 때         <source  src = "video.ogg"  type = "video/ogg;  codecs="theora,  vorbis""> </source> </video>

 

HTML5 비디오 재생 실습 프로그램