[8장]HTML5 태그(5) - 멀티미디어 태그

★동영상 태그

 

<video>태그 - 비디오 파일 삽입

 

- 기본형 : <video src="경로" 속성="속성값">...</video>

- mp4 비디오 파일 형식은 크롬이나 사파리에서만 재생 가능하므로 브라우저마다 재생할 수 있는

  파일을 지정해 주어야 함

- 주요 브라우저에서 지원하는 비디오 코덱과 파일 형식

 

브라우저	코덱	파일 형식
사파리	H.264/AVC	mp4
오페라	오그 테오라, WebM	ogv, webm
파이어폭스	오그 테오라, WebM	ogv, webm
크롬	H.264/AVC, 오그 테오라, WebM	mp4, ogv, webm
인터넷 익스플로러 9+	H.264/AVC	mp4
인터넷 익스플로러8	지원 안함	지원 안함
아이폰 & 안드로이드폰	H.264/AVC	mp4

 

- <source>태그를 이용해 각 브라우저에서 재생할 수 있도록 해야함

 

 

★오디오 태그

 

<audio>태그 - 오디오 파일 삽입

 

- 기본형 : <audio src="경로" 속성="속성값">...</audio>

 

브라우저	코덱	파일 형식
사파리	MP3	mp3
오페라	Ogg Vorbis	oga, ogg
파이어폭스	MP3, Ogg Vorbis	mp3, oga, ogg
크롬	MP3, Ogg Vorbis	mp3, oga, ogg
인터넷 익스플로러 9+	MP3	mp3

 

- <source>태그를 이용해 각 브라우저에서 재생할 수 있도록 해야함

 

 

<source>태그 - 여러 미디어파일 한꺼번에 지정하기

 

- 기본형 : <source src="경로" type="미디어/파일 형식"></source>

- 브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에 <source>태그를 여러개 사용함

 

 

★비디오 태그 & 오디오 태그 속성

 

controls 속성

- 미디어 파일에 컨트ㅡ롤 막대를 함께 표시

 - 사용법 : <video src="경로" controls>...</video>

 

preload 속성

- 재생 전 오디오 파일을 다운로드 할 것인지 일부 정보만 다운로드 할 것인지 여부 지정

- 사용법 : <audio preload="속성값">...</audio>

- 속성값

  └ none : 재생버튼을 누를 경우 다운로드

  └ metadata : 메타정보만 다운로드

  └ auto : 페이지 접속시 바로 다운로드, 다운로드 끝난 후 재생버튼 눌러야 재생

- 속성값을 지정하지 않을 경우 auto속성으로 설정됨

 

autoplay 속성

-비디오나 오디오 파일을 다운로드 하자마자 재생

- 사용법 : <video autoplay>...</video>

 

loop 속성

- 미디어 파일 재생이 끝난 후 앞으로 되돌아가 다시 재생

- 사용법 : <video loop>...</video>

 

 

 

※실습하기※

 

 

 

 

▲크롬에서 결과