html5 video mp4파일 ogv(ogg),webm파일로 변환하기

2014. 6. 27. 17:08 내맘대로긍정

프린트 하기

들어가 보시면 html5 video태그 쓰는방법이 상세히 나와있습니다.

html5 video가 지원하는 비디오 포맷은

각 포맷의 비디오코덱은 이러합니다.

mp4: H.264/AVC
webm: VP8/Vorbis
ogv: Theora/Vorbis

입니다.

그중 ogv파일과 webm 파일을 어떻게 인코딩하는지에 대해서 설명해드리겠습니다.

인코딩방법이 많지만 저는 Firefox의 add-on 을 사용해서 변환을 합니다.

(Firefox가 없으면 다운로드 해줍니다.)

www.firefogg.org에 접속합니다.

fireogg add-on을 설치합니다.

설치후 Make web viedo를 눌려서

이화면에서 Select File...을 눌려 파일을 선택해줍니다.

동영상 파일을 선택후

변환할 포맷과

변환할 프리셋을 정합니다.

정한후 Encode 눌리시면

이렇게 진행상황을 보실 수 있습니다.

인코딩이 끝난후 기존동영상파일이 있던 폴더로 가시면 정상적으로 인코딩된 파일을 보실 수 있습니다.

html5 video 예제 소스

----------------------------------------------

<HTML>

<head>

html5 동영상 재생 소스

</head>

</video>

</body>

</HTML>

----------------------------------------------

html5 video태그 속성

특성	설명
src	동영상 파일을 가리키는 URL을 나타내는 문자열입니다.
controls	기본 제공 재생 컨트롤 집합을 설정하는 부울 특성입니다. 여기에는 일반적으로 재생, 일시 중지, 검색 및 볼륨 설정이 포함됩니다. Internet Explorer 10에는 여러 오디오 및 텍스트 트랙을 선택할 수 있는 컨트롤도 표시됩니다.
poster	동영상 플레이어에 표시되는 자리 표시자 이미지를 나타내는 문자열입니다. 해당 지점에 원본이 설정되어 있지 않거나 콘텐츠를 로드하는 중이어서 동영상을 사용할 수 없는 경우에만 포스터 이미지가 표시됩니다.
loop	컨트롤의 일시 중지 단추를 누르거나 스크립트에서 pause 메서드를 호출할 때까지 동영상을 반복적으로 재생하는 부울 특성입니다.
muted	오디오 트랙을 끈 상태로 동영상을 재생하는 부울 특성입니다.
autoplay	플레이어에서 콘텐츠를 충분히 버퍼링한 이후에 동영상 재생을 자동으로 시작하는 부울 특성입니다.
preload	얼마 만큼 버퍼링해야 하는지에 대한 힌트를 정의하는 부울 특성입니다.
height	동영상 플레이어의 높이(픽셀)를 설정합니다.
width	동영상 플레이어의 너비(픽셀)를 설정합니다.

내맘대로긍정