You cannot see this page without javascript.

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

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

 브라우저

버전

비디오 코덱 

 파이어폭스

 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
349 CentOS7 ▒ Doly의 센트OS(CentOS) 7 강좌11 4. 원격접속 - 1.VNC file [11] LynX 2014-10-23 2222
» Programing HTML5 부라우저별 Video코덱 및 포멧변경 [29] LynX 2013-07-20 2193
347 Internet Explorer KT 인터넷 접속제한 공유기 설정 LynX 2014-01-13 2127
346 Linux USB부팅 리눅스의 변경 사항 초기화 [16] LynX 2015-01-07 1971
345 Windows 7 윈도우7(Windows7) 공유폴더에 암호걸기 file [7] LynX 2013-07-25 1966
344 Programing 웹사이트 APK 만들기 file [1] [17] LynX 2015-07-02 1817
343 Linux sendmail, dovecot 설치 및 설정 [20] LynX 2014-08-01 1766
342 Linux FreeBSD APM Source Compile LynX 2016-05-20 1718
341 HTML Tag css, cascading style sheets, 스타일 정의 방법 [9] LynX 2015-02-06 1691
340 Server 아파치 - 톰캣 연동하기 (PHP, JSP 같이 사용하기) LynX 2014-05-19 1626
339 Linux ODBC 설정 [30] LynX 2015-03-18 1571
338 Server Windows에서 Apache 2.x, Tomcat 7.x 연동 후 가상호스트를 이용하여 서비스하기 LynX 2014-06-10 1501
337 Programing make - 07 접미사 규칙 LynX 2017-02-22 1480
336 Server Josso file LynX 2013-12-19 1452
335 Programing meadco print LynX 2013-12-12 1439
334 Linux LFS/Building - 빌드하기 [11] LynX 2014-08-06 1396
333 Network GNS3 메뉴 , VPCS file [34] LynX 2015-04-29 1352
332 CentOS7 ▒ Doly의 CentOS7 강좌16 6. CentOS 네트워크 1 - 개념, 2 - 이더넷 설정 file [1] LynX 2014-10-23 1296
331 Server DNS [25] LynX 2015-07-16 1230
330 Linux WOW server [13] LynX 2015-01-11 1169

XE Login