HTML5 강좌 15강 - HTML5 태그 - 비디오

HTML5 강좌 15강 - HTML5 태그 - 비디오

이번 강좌에서는 비디오를 재생하는 플레이어를 만들어보겠습니다.

비디오 태그는 오디오 태그와 거의 흡사합니다.

<video src="비디오 파일 주소" controls> 

지원 불가능한 브라우저에서 표현할 내용 

</video>

정말 간단하죠?

오디오 태그와 마찬가지로 source 요소를 사용하여 좀 더 디테일한 플레이어 설정이 가능합니다.

<video controls>

<source src="비디오 파일 주소" type="video/ogg">

<source src="비디오 파일 주소" type="video/mp4">

<p>지원 불가능한 브라우저에서 표현할 내용 </p>

</video>

비디오 태그에 속성에 대해 알아보겠습니다.

오디오 태그 속성과 비슷합니다.

(1)src : 재생할 파일 경로 지정

(2)autoplay : 페이지 로드 시 사운드를 재생할 지 여부 지정

(3)controls : 플레이어 표시

(4)loop : 반복할 재생 횟수

(5)preload : 페이지가 열릴 때 오디오의 로드 설정

-> none : 자동 로드하지 않음, auto : 자동 로드, meta : 오디오의 메타 정보만 로드

(6)width, height : 비디오의 너비/높이 지정

(7)poster : 비디오가 로드되기 전에 보여줄 이미지 지정

(8)muted : 비디오의 음소거 지정

비디오 태그 역시 브라우저 마다 차이를 가지고 있습니다.

사용자가 최신버전의 브라우저를 사용하지 않는다면 비디오가 재생되지 않을수도 있죠.

그러니 지원이 불가능한 브라우저라면 사용자에게 알려줘야 합니다.

오디오 태그와 달리 비디오 태그는 코덱을 지정할 수 있습니다.

source 요소에 type 속성에 코덱 형식에 대한 타입을 추가로 지정합니다.

(1)mp4 파일 안에 H.265 형식의 영상과 AAC 형식의 음성이 함께 있을 때

type="video/mp4; codecs='avc1.4D401E, mp4a40.2'"

(2)ogg 파일 안에 Theora 형식의 영상과 Vorbis 형식의 음성이 함께 있을 때

type="video/ogg; codecs='theora, vorbis'"

이 내용 까지는 영상을 공부했던 분들이 아니면 잘 모르죠.

저도 잘 모르겠네요.

이번에는 플레이어 하단에 버튼을 몇개 추가해 보겠습니다.

오디오 태그에서 했던 방식과 같습니다.

(1) <button onclick="document.getElementById('player').play()">재생 하기</button> 

(2) <button onclick="document.getElementById('player').pause()">일시 정지</button> 

(3) <button onclick="document.getElementById('player').volume += 0.1">볼륨 +</button> 

(4) <button onclick="document.getElementById('player').volume -= 0.1">볼륨 -</button> 

비디오 태그 역시 오디오 태그와 마찬가지로 더 많은 기능이 있고

자바스크립트를 사용하여 코드를 작성할 수 있습니다.

이번 강좌에서는 샘플 페이지만 첨부를 하고

다음 강좌에서 미디어 파일을 제어하는 속성을 공부하고 테스트 해보겠습니다.

(예제는 첨부파일에서 받을 수 있습니다.)

15.zip