[HTML5] 비디오 태그

비디오 태그는 오디오 태그와 어느정도 유사합니다.

비디오 태그 답게 조금 다른 태그가 있기는 하지만 그 부분만 알면 오디오 태그와 유사하기 때문에 쉽게 익힐 수 있습니다.

비디오 태그는 기본적으로 다음과 같은 형식입니다.

<video src="파일 주소"></video>

비디오 태그 역시 다양한 속성들을 부여할 수 있는데요.

autoplay : 동영상을 자동 재생합니다.

controls : 동영상 재생 컨트롤을 표시 합니다.

height : 높이를 지정합니다.

loop : 동영상의 자동반복 여부를 지정합니다.

muted : 처음에 음소거를 기본 값으로 지정합니다.

poster : 동영상 재생 전 미리 보일 이미지를 설정합니다.(값은 이미지 파일 주소)

preload : 페이지를 로드 할 때 미리 영상을 불러옵니다.

src : 동영상 파일의 주소를 설정하빈다.

width : 너비를 지정합니다.

출처 : http://www.w3schools.com/tags/tag_video.asp

비디오 태그 역시 오디오 태그처럼 source를 통해서 동영상 파일의 확장자 지원에 대해서 설정할 수 있습니다.

확장자에는 MP4, WebM, Ogg 파일 형식이 있습니다.

w3school에 가면 웹브라우저마다 지원하는 것에 대해서 자세히 나와 있네요.

오디오 태그와 다를 것 없습니다. 다음과 같이 작성하시면 됩니다.

<video controls autoplay loop>

    <source src="영상 파일 주소" type="video/mp4">

    <source src="영상 파일 주소" type="video/WebM">

    <source src="영상 파일 주소" type="video/ogg">

</video>

이렇게 작성하면 mp4 확장자를 웹 브라우저에서 지원하는지 확인 한 다음에 없으면 WebM이 되는지 확인해보겠지요.