You cannot see this page without javascript.

글 수 369

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

Programing 조회 수 2716 추천 수 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
번호 제목 글쓴이 날짜 조회 수
69 HardWare 라우터 기본설정 LynX 2013-09-28 259
68 SoftWare 공인 IP와 사설 IP LynX 2013-09-28 332
67 HardWare PacketTracer60_Build45 file LynX 2013-09-28 317
66 Server Windows7에 Apache 설치 file LynX 2013-09-05 297
65 Linux vi 명령어 LynX 2013-09-02 227
64 Linux 리눅스 명령어 모음 LynX 2013-09-02 1177
63 Linux 리눅스 부팅과정 LynX 2013-08-26 341
62 Printer HP Photosmart B210 LynX 2013-08-20 356
61 Windows 7 윈도우7(Windows7) 공유폴더에 암호걸기 file [7] LynX 2013-07-25 2087
60 HTML Tag Flowplayer [11] LynX 2013-07-20 768
» Programing HTML5 부라우저별 Video코덱 및 포멧변경 [29] LynX 2013-07-20 2716
58 HTML Tag 모바일 웹에서 동영상 재생방법 LynX 2013-07-13 658
57 Xpress Engine 게시판 -> 기본글 양식 LynX 2013-07-11 334
56 Media PDF 파일을 JPG 으로 변환하기 - Free PDF to JPG Converter file LynX 2013-06-25 451
55 HTML Tag JWPlayer 사용법 #2 포맷 [14] LynX 2013-06-25 977
54 HTML Tag JWPlayer 사용법 #1 시작 file [7] LynX 2013-06-25 761
53 Printer HP Officejet Pro K8600 호환 드라이버 [10] LynX 2013-06-21 493
52 Windows XP 핫픽스 통합 시디 만들기 [18] LynX 2013-06-20 675
51 Windows XP USB로 XP 설치하기 file LynX 2013-06-20 409
50 Windows XP XP 원본 이미지에 AHCI 드라이버 통합 file [6] LynX 2013-06-20 1498
쓰기 목록

XE Login