HTML5 부라우저별 Video코덱 및 포멧변경

글 수 369

HTML5 부라우저별 Video코덱 및 포멧변경

Programing 조회 수 2724 추천 수 0 2013.07.20 14:59:15

LynX *.168.0.1 https://tocup.net/tech/51309

브라우저	버전	비디오 코덱
파이어폭스	3.6	ogg/theora
파이어폭스	4	ogg/theora, WebM, H.264*
사파리	3	H.264
IE	9	H.264, WebM**
IE	10	H.264
크롬	9.0	ogg/theora, H.264
크롬	10.0	ogg/theora, WebM, H.264
오페라	10.5	ogg/theora
오페라	11.1	ogg/theora, WebM

▣ mp4 파일로 인코딩하기

http://tvpot.daum.net 으로 접속

[팟인코더]를 클릭합니다

[팟인코더 다운로드]를 클릭하여 팟인코더를 설치합니다.

변환할 파일을 [불러오기]를 눌러 가져 온 후 내설정의 세부설정을 클릭합니다.

세부 설정에서 비디오코덱 과 오디오코덱을 위와 같이 설정한 후 확인을 클릭합니다.

저장할 폴더를 선택 후 인코딩시작을 클릭하면 비디오 인코딩이 완료됩니다.

▣ ogv 파일로 인코딩하기

파이어폭스 브라우저를 실행 후 http://www.firefogg.org/ 으로 접속합니다.

파이어포그를 다운로드 하기위해 install firefogg링크를 클릭하고 파이어포그 소프트웨어를 설치하세요.

설치후 [지금다시시작] 을 클릭하세요

파이어폭스가 다시 시작되면 Make Ogg videos 링크를 클릭하세요

<Select file>을 클릭한 후 변환할 원본 동영상을 선택합니다.

선택한 원본 동영상을 변환할 format을 설정하고 [Encode] 클릭

▣ H.264 파일로 인코딩하기

[Add File]을 클릭하여 변환할 원본파일을 추가 하고,

[Profile] 두번째 값을 Archos H.264/MPEG-4 AVC video로 선택하고 저장할 폴더를 변경한 후 [START]를 클릭합니다.

[Evaluate] 클릭

완료 되면 *.mp4 파일이 생성됩니다.

◈ <video> 태그

속성	설명
src	동영상 파일의 경로를 지정
poster	동영상이 화면에 나타나지 않을 때 대신 표시할 그림을 지정
preload	동영상이 백그라운드에서 다운로드되어 재생 단추를 눌렀을 때 재생되게 함
autoplay	동영상을 자동 재생
loop	반복 재생 횟수를 지정
controls	동영상 화면에 콘트롤 막대를 추가
width	동영상 화면의 너비를 지정
height	동영상 화면의 높이를 지정

⊙HTML5 예제

//////////////////////////////// *.html //////////////////////////////////

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>media</title>
<link rel="stylesheet" href="main.css">
</head>

<body>
    <header>
      <h1>media</h1>
    </header>

    <div>
      <video autoplay controls>
      
      <source src="../images/Wildlife.ogv" type="video/ogv">
      
      <source src="../images/Wildlife.webm" type="video/webm">
      
      <source src="../images/Wildlife.mp4" type="video/mp4">
       </video>
    </div>
</body>
</html>