[HTML5] 2. 동영상 재생

IBM에서 제공하는 강좌를 보고 정리한 내용입니다.
IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기

글순서
1.자주쓰는 태그 정리
[HTML5] 1-1. 문서에서 자주쓰이는 태그 정리
[HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS)
[HTML5] 2. 동영상 재생
[HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용
[HTML5] 4. 캔버스를 이용하여 이미지그리기

HTML5에서 눈에 띄게 달라진것들중 하나가 비디오재생과 같은 멀티미디어 기능이 태그로 가능하다는 점입니다.

태그 한줄로 재생되는 동영상

1. 지원되는 브라우저

기본적으로 HTML5를 지원하면 동영상 태그는 먹히지만 재생될지는 알수 없습니다.
왜냐하면 익스플로러와 사파리는 H.264표준만 지원하기 때문입니다.
(참고 : 위키백과 - H.264/AVC)

H.264는 유료기 때문에 오픈소스진형에서는 웹엠(WebM)을 밀고 있습니다.
(참고 : 위키백과 - WebM)

물론 익스플로러와 사파리도 WebM을 재생할수 있도록 구성할수 있습니다.
다만 디폴트로 되지 않다는 문제와 세계최대의 스트리밍업체인 유튜브가 웹엠을 밀고 있다는거.
(웹엠이 구글의 후원을 받고 있으니 당연이 유튜브도 ㅎㅎㅎㅎ)

웹엠

2. 비디오(video) 

video태그만 넣으면 끝입니다 ㅡ.ㅡ
경로만 지정되있으면 되죠.
(참고 : W3C - 4.8.6 The video element )

<video src="http://www.double.co.nz/video_test/transformers480.ogg" >
</video>

참암 쉽죠잉?

2-1. 옵션

위 태그를 사용해 보셨다면 본능적으로 무언가 이상하다는 것을 아실겁니다.

재생이 안되잔아!!!
그렇습니다.
위 코드만 한다면 재생이 되지 않습니다 ㅋㅋㅋ

재생을 시키려면 재생을 시키기 위한 인터페이스(콘트롤즈, controls)를 출력하던가 자동재생(오토플래이, autoplay)를 활성화 시켜야 합니다.

2-1-1. 콘트롤즈(controls)

보통 동영상재생사이트 같은곳 가면 재생에 필요한 기본적인 것들(재생,일시정지, 볼륨조절 등등)이 가능한 인터페이스를 제공합니다.
HTML5에서는 이런 인터페이스를 기본적으로 지원해줍니다.
이 인터페이스를 표시해주는 옵션이 콘트롤즈(controls)입니다.

<video src="http://www.double.co.nz/video_test/transformers480.ogg" controls >
</video>

이것이 기본내장이라늬!

유튜브처럼 다운로드가 얼마나 됬는지 여부등도 표시됩니다.
(우왕굳!)

2-1-2. 자동재생(오토플래이, autoplay)

페이지가 로드되면 자동으로 동영상이 재생되는 기능입니다.

<video src="http://www.double.co.nz/video_test/transformers480.ogg" controls autoplay >
</video>

2-1-3. 반복재생(루프, loop)

동영상 재생이 끝나면 다시 처음부터 재생해주는 옵션입니다.

<video src="http://www.double.co.nz/video_test/transformers480.ogg" controls loop >
</video>

2-1-4. 크기 지정

비디오 태그도 크기지정이 가능합니다.

<video src="http://www.double.co.nz/video_test/transformers480.ogg" controls width=300 height=200 >
</video>

비디오태그도 태그인지라 스타일이 먹히기 때문에 직접지정하기 보다는 스타일을 이용하는 것이 좋습니다.

3. 예외 처리

만약 동영상을 재생할수 없는 상황이라면 어떻게 될까요?
기본적으로 아무것도 표시되 지 않거나 콘트롤만 덩그라니 표시되거 합니다.
이럴때 메시지를 표시해주어야 겠지 않겠습니까?

이런 메시지는 간단하게 표시 할수 있습니다.

<video src="http://www.double.co.nz/video_test/transformers480.ogg" >
    <p>이것은 크롬이나 파폭에서만 재생됨요!</p>
</video>

이렇게 간단하게 메시지를 표시 할수 있습니다.
이 에러메시지를 내보낼지 여부는 브라우저가 알아서 판단하므로 걱정할것 없습니다 ㅎㅎㅎ

4. 스타일 적용

스타일 적용은 일반 태그와 같습니다.

video {
    width: 300px; height: 100px;
}

이렇게 하면 크기가 지정 됩니다.

마무리

샘플에는 간단하게 동영상 태그만 설명하고 있습니다만 기술문서를 보면 텍스트 트랙을 이용한 자막출력같은 내용도 있더군요.
그외에도 미어어 컨트롤이라던가 하는 내용들이 나와있으나.....나중에 기회되면 자세하게 소개 하도록 하겠습니다 ㅎㅎㅎ