브라우저 | 버전 | 비디오 코덱 |
파이어폭스 | 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>
<body>
////////////////////////////// *.css ////////////////////////////////////////// video{ |
▶▶아직까지는 브라우저마다 사용할 수 있는 음악 파일이 다르기 때문에
<source> 태그를 이용해 파일 종류별로 따로 지정해주어야 합니다.
[파이어폭스 v.20.0.1 브라우저로 실행한 결과]
[Internet Explorer v.0.0.4 브라우저로 실행한 결과]
[크롬 v.26.0 브라우저로 실행한 결과]
[오페라 v.2.15 브라우저로 실행한 결과]
[사파리 v.5.1 브라우저로 실행한 결과]
