HTML - 비디오(video)태그와 그 속성 - 멀티미디어 (2)

HTML - 비디오(video)태그와 그 속성

멀티미디어 (2)

 오늘은 비디오(video)태그와 그 속성에 

대해서 알아 보도록 하겠습니다.

태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)

먼저 HTML에서 비디오(video)태그란?

HTML5에서 비디오(동영상)을 재생할 수 있는 태그인데

앞서 배웠던 오디오 태그와 적용방식의 거의 동일하기 때문에 설명은 

아주 간단하게 하겠습니다. ^^

비디오(video)태그 사용법

위 이미지를 보시면 아시곘지만 

사용법은 오디오 태그와 동일합니다.

단지 달라진게 있다면 속성 이 몇개더 추가된 것인데요.

속성은 아래와 같습니다.

속성	내용
autoplay	자동으로 비디오 재생
src	재생할 비디오 경로 지정
width, height	비디오 재생 너비 또는 높이 지정
controls	비디오 재생을 제어하는 표시 생성
loop	비디오 반복 재생
poster	비디오 다운로드 표시
preload	사용자 생각이 아니더라도 오디오를 다운로드
muted	비디오 오디오 출력을 중지

비디오(video) 태그 속성

추가로 속성 중 특이한 내용이 있는데 이는 poster 입니다.

poster는 비디오를 다운 받을때 사용자한테 보여주는 그림을 뜻합니다.

여기까지 간략하게 비디오 태그 속성에 대해서 알아 보았으며

이 다음은 파일형식에 따라 지정하는 방벅을 알아보도록 하겠습니다. ^^

먼저 비디오 파일 형식에는 mp4나 webm 또는 ogg 등이 있는데

이 또한 오디오 태그와 마찬가지로 모든 웹 브라우저 

(익스플로러, 크롬, 사파리, 오페라 등등)에서

재생되는 비디오 형식은 아직까지 없으므로 오디오 태그와 동일하게

<source>태그를 사용하여 작업할 수 있습니다.

비디오(video)태그 <source>태그 사용법

단지 오디오 태그와 달라진게 있다면 파일 확장자만 달라지고

비디오 태그에 너비 폭 (사이즈)지정 뿐입니다.

여기까지 HTML - 비디오(video)태그와 그 속성에 대해서 기록해 보았습니다.

다시 한번 말하지만 백번 보는 것 보다 한두번 써보고 실행해 보는것이 이해하기 쉽습니다.

이상 HTML - 비디오(video)태그와 그 속성 - 멀티미디어 (2)에 

관련된 포스팅을 마치도록 하겠습니다.