You cannot see this page without javascript.

글 수 369

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

Programing 조회 수 2724 추천 수 0 2013.07.20 14:59:15
LynX *.168.0.1

 브라우저

버전

비디오 코덱 

 파이어폭스

 3.6

 ogg/theora

 4

 ogg/theora, WebM, H.264*

 사파리

 3

 H.264

 IE

 9

 H.264, WebM**

 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>
       <!-- ogv는 예전의 파이어폭스, 오페라 -->
       <source src="../images/Wildlife.ogv" type="video/ogv">
       <!-- WebM는 파이어폭스4, 오페라, 크롬 -->
       <source src="../images/Wildlife.webm" type="video/webm">
       <!-- IE10, 사파리 -->
       <source src="../images/Wildlife.mp4" type="video/mp4">
       </video>
    </div>
</body>
</html>

 

//////////////////////////////   *.css //////////////////////////////////////////

video{
 width: 800px; height: 450px; border: 5px solid black; 
}

 

▶▶아직까지는 브라우저마다 사용할 수 있는 음악 파일이 다르기 때문에

<source> 태그를 이용해 파일 종류별로 따로 지정해주어야 합니다.

 

[파이어폭스 v.20.0.1 브라우저로 실행한 결과]

 

[Internet Explorer v.0.0.4 브라우저로 실행한 결과]

 

[크롬 v.26.0 브라우저로 실행한 결과]

 

[오페라 v.2.15 브라우저로 실행한 결과]

 

[사파리 v.5.1 브라우저로 실행한 결과]

목록
List of Articles
번호 제목 글쓴이 날짜sort 조회 수
369 Windows7 OEM을 활용하여 클린설치 file [11] LynX 2010-11-06 765
368 Windows7 에서 시스템을 백업/복원하는 가장 쉬운 방법!! file LynX 2010-11-07 334
367 탐색기 메뉴에 '명령 프롬프트 열기'와 '메모장으로 열기' 추가하기 file [14] LynX 2010-11-08 591
366 인터넷 익스플로러 리플레쉬 file LynX 2011-05-02 286
365 활성 네트워크 중복으로 인한 인터넷 연결 안되는 문제 file [12] LynX 2011-05-26 971
364 32bit Driver을 64bi로 설치하기 [8] LynX 2011-06-21 325
363 설치파일(inf)에 대한 이해 [7] LynX 2011-06-22 603
362 inf 설치시 경고창 안뜨게 하기 file [10] LynX 2011-06-22 430
361 로우 포맷(Low level format, 저수준 포맷) 하기 file [11] LynX 2011-07-06 722
360 Win XP Crack file [8] LynX 2011-10-31 269
359 윈도우7 메모리 인식 문재 file [13] LynX 2011-11-30 530
358 RoundCube 첨부 용량 변경 / 한글 수정 [10] LynX 2012-01-31 836
357 윈도우7 알수없는장치 file [8] LynX 2012-03-13 273
356 디지털 서명 file [1] LynX 2012-03-15 445
355 아레한글 사용시 출력물에 음영이 나타나는 현상. file [11] LynX 2012-03-29 1155
354 Xyview DVR서버 연결 [8] LynX 2012-04-19 295
353 HP Officejet 6500A (Plus) 호환 드라이버 [8] LynX 2012-05-16 294
352 IIS에 FastCgi모듈 활성화 시키기 file [12] LynX 2012-11-21 1283
351 윈도우 2008서버에 XE 설치 절차 [9] LynX 2012-11-22 230
350 Windows Server 2012 설치 file LynX 2012-11-23 477
쓰기 목록

XE Login