2. Video

2. Video

지금까지는 웹사이트에서 동영상 파일을 재생하기 위해서 어도비(Adobe)사의 Flash Video가 대세였지만 HTML5가 등장하면서 어도비(Adobe)사의 Flash가 조금은 시장에서 밀리는 듯한 인상을 받게 되는 건 저만의 생각이 아닌 듯합니다.
그 원인은 애플사에서 기존의 Flash Video를 지원하지 않고 HTML5에 기본적으로 내장되어 있는
<video> 태그를 이용한 동영상 재생을 지원한다고 발표했기 때문입니다. 그리고 그 뒤를 이어 마이크로소프트도 메트로 UI(User Interface) 환경의 Windows 8에 기본적으로 내장되는 IE10에는 Flash를 지원하지 않는다고 발표한 상황입니다.

그렇다고 당장 HTML5의 video 태그가 현재의 Flash 시장을 대체할 것이라고 생각되지는 않는데 스마트폰, 테블릿 분야부터 자연스럽게 전환이 될 것이라는 생각이 듭니다.
현재로서는 웹 브라우저, 지원하는 파일 형식의 한계로 인해 HTML5의 video 요소를 이용한 동영상 재생은 개인 PC 환경에 적용하려면 추가적인 작업이 필요한 상황입니다.
따라서 기존의 avi, wmv, mp4, swf 같은 확장자를 갖는 동영상을 현재 HTML5의 video 요소를 이용하여 재생 가능한 형식으로 변환하는 방법은 소개하고 이를 video 요소를 지원하는 FireFox를 이용하여 재생하는 방법을 설명하고자 합니다.

2.1 동영상 파일의 변환

HTML5의 <video> 태그에 포함하여 재생할 수 있는 동영상 파일 형식은 대부분의 웹 브라우저에서 파일 확장자가 ogg, ogv 형태인 비교적 덜 알려진 파일 형식을 사용하여 재생할 수 있습니다. 이와 더불어 확장자가 mp4인 파일 형식을 IE9와 같은 일부 웹 브라우저에서 재생할 수 있는 상황인데 아직은 조금 미흡한 부분이 있어서 여기서는 파일 확장자가 ogg, ogv인 것을 기준으로 HTML5의 동영상 재생 관련 기능을 알아봅니다.

검색을 해보면 많은 동영상 변환기가 검색되는데 “http://www.mirovideoconverter.com/ “에서 제제공하는 “MiroVideo Converter”를 이용해서 파일 확장자가 avi인 동영상을 파일 확장자가 ogv인 동영상으로 변환해봅니다. 먼저 위 사이트에서 MiroConverterSetup.msi를 다운로드 받아서 설치를 한 후 실행하면 다음과 같은 화면이 나타납니다.

위에서 Choose a file을 클릭하면 대화상자가 열리는데 여기서 변환할 파일 확장자가 avi인 동영동 파일을 선택합니다. 저의 경우는 birds.avi 파일을 선택합니다. 선택이 완료되면 다음과 같이 선택한 화면이 나타나며 하단의 Convert! 버튼을 클릭하여 변환을 시작합니다.

정상적으로 변환이 완료되면 해당 디렉토리에 “birds.theora.ogv” 파일이 생성되어 나타납니다.
이제 HTML5에 정의된 video 요소(Element)를 이용하여 “birds.theora.ogv” 파일을 재생할 수 있는지 알아봅니다.

2.2 Video 요소(Element) 이해하기

HTML5에 정의되어 있는 video 요소(Element)는 많은 속성들을 가지고 있는데 간략하게 요약해보면 다음과 같습니다.

속성	기능
src	실행할 동영상의 URL
autoplay	자동으로 동영상을 재생할 것인지 설정하는 속성으로 “autoplay”, “”, 혹은 값을 명시하지 않음 형태로 사용
controls	재생/멈춤 버튼을 포함하는 컨트롤 바를 나타내어 동영상을 재생/멈춤 설정
poster	재생할 동영상이 없을 경우 나타낼 이미지를 설정하는 속성
loop	동영상을 반복 재생할 것인지 설정
muted	소리를 조용하게 설정하는데 사용
preload	preload 속성은 페이지가 로드될 때 동영상을 바로 다운로드할 지 안할지 등을 결정하는데 사용. autoplay 속성이 설정되어 있으면 무시됨
mediagroup	다수의 비디오 파일을 브라우저에게 함께 링크하도록 하는 속성으로 현재 대부분의 브라우저에서 지원되지 않음
width	재생하는 동영상의 너비를 설정
height	재생하는 동영상의 높이를 설정

이제 각 속성들에 대한 사용방법을 알아보기에 앞서 여기에서 사용할 전체적인 HTML 문서 코드를 나타내면 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 Video를 이용한 동영상 플레이</title>
</head>
<body>
<h5>시애틀에서 새들과 함께</h5>

<video … ></video>
</body>
</html>

위와 같이 “video 요소와 앞서 설명한 코드가 들어가는 부분” 아래에 이어지는 속성들에 대한 코드들을 추가하고 해당 파일을 적당한 이름으로 저장한 후 웹 브라우저를 이용하여 그 결과를 확인해봅니다.

2.2.1 src 속성
먼저 src 속성은 실행할 동영상의 URL을 설정하는 속성으로 속성으로 video 요소의 시작 태그 내에 다음과 같이 하나의 로컬 영역의 존재하는 동영상 파일을 형태로 설정하거나 웹사이트 URL을 이용하여 설정할 수 있습니다.

메모장을 열어서 위에서 언급한 전체적인 HTML 문서 코드를 작성하고 video 요소 부분을 다음과 같이 작성합니다.

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 Video를 이용한 동영상 플레이</title>
</head>
<body>
<h5>시애틀에서 새들과 함께</h5>

<video src="birds.theora.ogv" height="300" width="400" ></video>
</body>
</html>

이제 “birds_localsrc.html”로 저장하고 Firefox로 열어보면 다음과 같이 정지된 이미지 형태로 나타나게 됩니다.

2.2.2 autoplay 속성
autoplay 속성은 자동으로 동영상을 재생할 것인지 설정하는 속성으로 video 요소의 시작 태그 내에 autoplay=“autoplay”, 혹은 autoplay=“”, 아니면 autoplay 형태로 다음과 같이 사용합니다.

메모장으로 방금 전 사용한 “birds_localsrc.html”을 열고 video 요소의 시작 태그 내에 다음과 같이 한 단어를 추가합니다.

<video src="birds.theora.ogv" autoplay height="300" width="400" >

이제 다른 이름으로 저장을 메뉴에서 선택해서 “birds_localsrcauto.html”로 저장한 후 Firefox로 열면 자동으로 실행되게 됩니다.

2.2.3 controls 속성
controls 속성은 재생하는 동영상에 재생/멈춤 버튼을 나타내는 속성으로 controls=”controls”나 controls=”” 아니면 controls와 같이 video 요소의 시작 태그 안에서 넣어 다음과 같이 사용할 수 있습니다.

메모장으로 방금 전 사용한 “birds_localsrc.html”을 열고 video 요소의 시작 태그 내에 다음과 같이 한 단어를 추가합니다.

<video src="birds.theora.ogv" controls height="300" width="400" >

이제 다른 이름으로 저장을 메뉴에서 선택해서 “birds_localscontrols.html”로 저장한 후 Firefox로 열면 다음과 같이 동영상 하단에 재생 및 정지와 소리를 조절하거나 전체화면 보기 같은 컨트롤들이 나타나게 되는데 각각 눌러서 실행을 해봅니다.

만일 자동 실행되고 컨트롤이 나타나게 하려면 video 요소의 시작태그 안에 autoplay를 같이 사용하면 됩니다.

2.2.4 poster 속성
poster 속성은 재생할 동영상이 없을 경우 나타낼 이미지를 설정하는 속성으로 video 요소의 시작 태그 내에 다음과 같은 형태로 poster 속성에 나타낼 이미지 파일을 설정하거나 외부 이미지의 URL을 설정하여 사용할 수 있습니다.

메모장으로 “birds_localsrc.html”을 열고 video 요소 부분을 다음과 같이 수정합니다.

<video src="birds.theora.ogv" poster="posterimage.png" autoplay height="300" width="400">
</video>

이제 다른 이름으로 저장을 선택하고 여기에 “birds_localposter.html”로 저장합니다.
위와 같은 형태로 설정한 후 Firefox를 이용하여 열어보면 현재 재생할 동영상이 src 속성에 있는대로 정확히 존재하므로 정상적으로 자동(autoplay)됩니다.
위 코드에서 src 속성의 재생할 동영상을 “birds.theora.ogv1”과 같이 확장자를 변경하여 재생 불가능하도록 변경, 저장한 후 다시 Firefox를 이용하여 열어보면 다음과 같이 기본적으로 poster 속성에 설정된 이미지가 다음과 같이 화면에 나타납니다.

2.2.5 loop 속성
loop 속성은 동영상을 반복 재생할 것인지 설정하는 속성으로 video 요소의 시작 태그 내에 loop=”loop”나 loop=”” 아니면 loop와 같은 형태로 다음과 같이 사용할 수 있습니다.

위에서 보는 것처럼 loop 속성과 함께 autoplay 혹은 controls 속성을 같이 사용하여 반복 재생 작업을 수행할 수 있습니다. 메모장으로 “birds_localsrc.html”을 열고 video 요소 부분을 다음과 같이 수정합니다.

<video src="birds.theora.ogv" loop autoplay height="300" width="400" />

다른 이름으로 저장을 선택하고 여기에 “birds_localloop.html”로 저장한 후 Firefox를 이용하여 열어보면 "birds.theora.ogv" 동영상을 반복 재생합니다. 만일 여러분이 위에서 controls 속성을 autoplay 속성 대신 사용했다면 하단에 controls 속성에서 설명한 재생, 소리 등과 같은 컨트롤들을 보게 되며 이를 이용하여 반복 재생할 수 있습니다.

2.2.6 muted 속성
muted 속성은 동영상의 소리를 조용하게 할 때 사용하는 속성으로 적용 가능한 분야는 웹사이트에서 광고 같은 경우 소리를 키워서 내보내면 광고를 보는 사람이 귀에 거슬린다고 생각할 수 도 있으므로 기본적으로 소리를 죽인 상태로 광고를 나타낼 때 사용하면 좋을 속성이라고 여기집니다. 그래서 사용자가 원하면 광고 멘트를 들을 수 있도록 볼륨을 조절할 수 있어야 하므로 사용시 controls 속성과 함께 다음과 같이 사용할 수 있습니다.

메모장으로 “birds_localsrc.html”을 열고 video 요소 부분을 위와 같이 수정하고 다른 이름으로 저장을 선택하여 “birds_localmuted.html”로 저장한 후 Firefox를 이용하여 열어봅니다.

위와 같이 controls 속성에 의해 컨트롤이 나타나고 autoplay 속성에 의해 자동 재생되며 muted 속성에 의해 음량이 0 으로 나타나게 됩니다. 여기서 여러분이 음량을 키우거나 줄일 수 있습니다.

2.2.7 preload 속성
preload 속성은 웹페이지가 로드될 때 동영상을 곧바로 다운로드할 것인지 등을 결정하는데 사용하는 속성으로 다음과 같은 3 가지 속성값을 사용할 수 있습니다.

속성값	의미
none	페이지가 로드될 때 해당 동영상이 다운로드되지 않아야 함.
metadata	페이지가 로드될 때 메타 데이터만 다운로드되어야 함
auto	페이지가 로드될 때 해당 동영상이 다운로드되어야 함

위에서 metadata는 해당 동영상의 길이나 첫 번째 프레임 등과 같이 동영상의 일부 정보들만을 다운로드하여 사용자로 하여금 해당 동영상을 볼 것인지 안 볼 것인지 결정하도록 할 때 사용 가능한 속성값입니다.
이와 같이 preload 속성은 다양한 웹 브라우저들 중에서 video 요소를 지원하지 않는 브라우저의 경우 페이지를 로드하면서 지원하지도 않는 video를 다운로드하는 번거로움을 막는데 도움이 될 수도 있습니다. 그래서 상황에 다음과 같이 3 개의 속성값 중 하나를 설정하여 사용할 수 있습니다.

이제 예제를 해보도록 할까요? 메모장으로 “birds_localsrc.html”을 열고 video 요소 부분을 다음과 같이 수정합니다.

<video src="birds.theora.ogv" preload="auto" controls height="300" width="400" />

다른 이름으로 저장을 선택하여 “birds_localpreload.html”로 저장한 후 Firefox를 이용하여 열어보면 실행결과는 controls 속성의 예제와 동일하게 나타납니다. 향후 IE 10 버전에서는 지원되길 기대하며 현재 IE(버전 9)로 열어보면 IE가 파일 확장자가 ogg계열(ogv)을 지원하지 않으므로 화면에 X 표시를 나타내며 동영상을 재생할 수 없는 상황이 나타나게 됩니다.

2.3 source 요소를 이용한 브라우저에 따른 선택적 실행

브라우저별로 video 요소를 이용한 동영상 실행을 지원하는 파일 형식이 다르기 때문에 이에 대한 대안으로 source 요소를 이용하여 사용자가 IE9를 사용할 때는 IE9에서 지원하는 mp4 형식이 실행되도록 하고 ogv를 포함한 ogg 계열을 지원하는 브라우저들은 해당 형식의 동영상이 실행되도록 할 수 있습니다. 사용하는 형식을 간략히 나타내면 다음과 같습니다.

위와 같이 source 요소의 src 속성에 재생할 동영상 파일을 파일 확장자별로 각각 명시하여 사용할 수 있습니다. 간단하게 예제를 해볼까요? 메모장으로 “birds_localsrc.html”을 열고 video 요소 부분을 다음과 같이 수정합니다.

<video autoplay controls height="300" width="400">
<source src="birds.mp4video.mp4" type="video/mp4" />
<source src="birds.theora.ogv" type="video/ogg" />
</video>

다른 이름으로 저장을 선택하여 “birds_localsource.html”로 저장한 후 Firefox를 이용하여 열어보면 source 요소의 src 속성에 설정된 "birds.theora.ogv" 동영상이 컨트롤이 나타나고 자동 실행되어 나타납니다. 지금까지 사용한 동영상 파일 확장자가 ogv(ogg 계열)이어서 IE9 환경에서는 재생할 수 없었는데 위와 같이 source 요소를 이용하여 파일 확장자가 mp4인 동영상을 재생할 수 있으며 실행화면은 다음과 같습니다.

이상으로 HTML5에서 오디오와 비디오 데이터를 audio, video 요소를 이용하여 어떻게 처리할 수 있는지 알아보았습니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Video에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.

저작자표시 비영리 변경금지

'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글

7장 Web Storage (0)	2013.08.08
6장 Drag and Drop (0)	2013.08.08
1. Audio (0)	2013.08.07
11.2 픽셀(pixel)에 기반한 이미지 가공(Manipulation) (0)	2013.08.07
11. 이미지(Image) (0)	2013.08.07

how to learn computer, programming and c

2. Video

'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글

티스토리툴바

2. Video

'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글

관련글

티스토리툴바