[HTML5] VIDEO & AUDIO > UCC,스트리밍 관련 자료

본문 바로가기

검색취소

[HTML5] VIDEO & AUDIO

검색 이전 다음 목록

본문

[HTML5] VIDEO & AUDIO

POSTED IN 모바일, 그리고 웹(WEB)/HTML5 // POSTED AT 2010/08/24 13:39

멀티미디어 지원
HTML 5 를 지원하는 브라우저는 비디오, 오디오와 같은 멀티미디어 형식을 자체적으로 지원한다
HTML 5 는 이러한 멀티미디어 파일을 웹 페이지에 삽입할 수 있는 태그를 정의하고 있으며 
재생과 관련한 각종 제어를 수행할 수 있는 스크립트 API가 제공된다
 
이전의 브라우저 환경
HTML 5가 등장하기 전, 브라우저 환경에서는 멀티미디어 재생을 자체적으로 할 수 없었다
대신 외부 기술, 즉 브라우저에 별도로 설치되는 플러그인(Plug in)의 힘을 빌어 멀티미디어를 표현할 수 있었다. 멀티미디어 재생을 위한 플로그인 기술로는 다음과 같은 것들이 있다
- 윈도우 미디어 플레이어
- 어도비 플래시 플레이어
- 애플 퀵타임 플레이어
- 마이크로소프트 실버라이트

이러한 플러그인이 브라우저에 따로 설치되어야만 멀티미디어 재생이 가능하였으며 이는 곧 표준과는 거리가 먼 개념이 되어 버렸다

웹 응용환경의 일관되고 표준적인 플랫폼을 지향하는 HTML5가 멀티미디어 재생을 위한 스펙이 마련된 것은 어찌보면 당연한 순리라 하겠다. 그 만큼 현재의 웹은 멀티미디어를 빼고 논할 수는 없는 것이다


브라우저 지원 현황
다른 HTML5 스펙과는 달리 비디오,오디오는 브라우저 별로 지원되는 코덱이 상이하다
즉 HTML 5 의 멀티미디어 구현은 지원하더라도 각기 다른 코덱을 지원하는 것이다
Video, Audio 스펙은 표준으로 정해졌지만 코덱은 아직 표준으로 정해진 것이 없기 때문이다

따라서 브라우저가 Video,Audio 를 지원하다고 해도 어떤 코덱을 지원하는 것인지 추가 확인이 필요하다. 우선 Video,Audio 를 지원하는 브라우저 현황을 살펴보자

Video, Audio 지원 현황
- Video 지원 현황



- Audio 지원 현황

출처: http://caniuse.com/

대부분의 최신 브라우저에서 Video, Audio를 지원하고 있다
또한 다음의 코드로 브라우저 지원 여부를 체크해 볼 수 있다

if(!!document.createElement('video').canPlayType) {
     alert("현재 브라우저는 비디오를 지원합니다")
}
else{
      alert("현재 브라우저는 비디오를 지원하지 않습니다")
}

이제 브라우저별로 각기 달리 지원되는 코덱에 대해 살펴보자

코덱 지원 현황
멀티미디어 형식에 대한 표준이 HTML5 사양에는 포함되지 않았다.
따라서 멀티미디어 재생을 위한 코덱의 비 표준화로 현재 브라우저 마다 동영상 재생 형식이 서로 다르다비디오 코덱으로는 H.264 Theora 가 있으며 오디오 코덱으로는 AAC,MP3  Vorbis 형식이 HTML5 용으로 사용되고 있다

모질라와 오페라는 라이선스가 없는 오픈 소스 Theora를 선호하며 애플과 구글은 H.264 코덱을 선호한다. 또한 마이크로소프트의 IE.9 에서는 H.264코덱만 지원한다고 발표한 바 있다

오디오 코덱 역시 라이선스가 없는
 Vorbis형식과 특허로 제한되어 있는 MP3, ACC 형식으로 이분화 되어 있다그리고 또 하나의 변수로 최근 구글이 동영상 코덱 개발사인 On2를 인수해 VP8 코덱을 오픈 하기로 하였다이에 모질라 및 오페라 등이 동참하기로 하였지만 애플의 참여는 알 수 없는 상황이다.

따라서 표준이 정립되기 전까지는 두 형식에 대한 브라우저 호환성을 유지해야 하는 부담이 있다
아래 표는 브라우저 별 지원되는 비디오/오디오 코덱 정보이다

 

파일 형식

비디오 코덱

오디오 코덱

사파리

MP4

MPEG/H.264

AAC/MP3

크롬

Ogg/MP4

Theora/H.264

Vorbis/AAC/MP3

파이어폭스

Ogg

Theora

Vorbis

 (스마트폰 브라우저의 경우 해상도 및 초당 프레임 등 추가 제약사항이 있을 수 있음)
 출처: HTML5 & API 입문, 시라이시 페이 저)



Video & Audio 재생하기
웹 페이지에 멀티미디어 형식을 삽입하고 재생하고 컨트롤 하는 기본적인 태그에 대해 알아보자

<video> , <audio> 태그
비디오, 오디오를 단순히 재생한 시키고자 할 경우 간단한 마크업 만으로도 충분하다
비디오 재생을 위한 <video> 태그와 오디오 재생을 위한 <audio> 태그가 제공되며
각 태그에 멀티미디어 파일의 위치(소스)를 제공해 주기만 하면 된다

<!DOCTYPE html>
<html>
<head></head>
<body>
  <video controls autoplay loop      
       src="http://www.double.co.nz/video_test/transformers480.ogg"></video
  <br>   
  <audio controls autoplay loop
       src="http://www.miaowmusic.com/audio/mp3/Miaow-07-Bubble.mp3"></audio>
</body>
</html>


구글 크롬 브라우저 실행화면

간단한 태그만으로 웹 페이지에 비디오,오디오 형식을 재생할 수 있다
예제에서 사용된 <video>,<audio> 태그의 속성은 다음과 같다
src: 비디오, 오디오 파일(소스)를 지정한다
controls: 재생을 컨트롤 하는 컨트롤 바를 보이게 한다
autoplay: 자동으로 재생을 시작한다


대체 요소 출력
HTML5 의 비디오, 오디오가 지원되지 않는 브라우저를 위한 대체요소 출력이 지원된다
아래와 같이 <video>,<audio> 태그 사이에 대체요소를 정의하면 된다

<video src="http://www.double.co.nz/video_test/transformers480.ogg">
    HTML5 Video 를 지원하지 않는 브라우저 입니다
</video
<br>   
<audio src="http://www.miaowmusic.com/audio/mp3/Miaow-07-Bubble.mp3">
    HTML5 Audio 를 지원하지 않는 브라우저 입니다
</audio>

위 코드를 MS IE 8.0 이하 버전에서 실행해 보면 대체 텍스트가 표시될 것이다
 

Video & Audio 제어하기
HTML5 에는 비디오, 오디오의 재생과 관련한 다양한 스크립트 API를 정의하고 있다

재생과 관련된 제어라 함은 시작, 중지, 일시정지, 재생위치파악, 재생길이, 재생속도, 볼륨크기, 음소거 등이 있으며 재생 간 발생하는 각종 이벤트 처리를 일컫는다

스크립트 API를 통해 제어를 하기 위해서는 Video(Audio)의 DOM 객체를 대상으로 수행하면 된다

var video1 = document.getElementById("video1");
video1.play(); //비디오를 재생함

Video, Audio 를 위한 다양하고 많은 속성과 함수 그리고 이벤트들이 제공된다
다음이 url에서 멀티미디어 관련 API 들을 확인해 보기 바란다


몇 가지 주요한 API를 알아보고 관련 데모를 제작해 보도록 하자

주요 속성
src: 멀티미디어 파일 소스 지정
currentTime: 현재 재생 위치를 초 단위로 반환
duration: 전체 재생시간을 초 단위로 반환
paused: 일시정지 여부 반환
ended: 재생 종료 어부 반환
muted: 음소거 여부 반환
volume: 볼륨 값(0.0 ~ 1.0 범위를 가짐)
error: 에러 정보를 반환
networkState: 멀티미디어 파일과 관련된 네트워크 상태 반환(접속전, 로딩 중, 완료, 로딩 실패 등)

주요 함수
load(): 멀티미디어를 읽어 들임(재생하지는 않음)
play(): 멀티미디어를 재생함
pause(): 일시 정지

주요 이벤트
play: 재생될 때 발생
progress: 멀티미디어 파일을 로딩중에 지속적(그리고 간헐적) 발생
timeupdate: 재생 중에 지속적 발생
ended: 재생 종료시 발생
error: 멀티미디어 로딩, 재생과 관련한 에러가 있을 시 발생

자주 응용 될 법한 주요 API에 대한 설명이다. 추가 API 설명은 반드시 관련 자료를 다로 보기 바란다


비디오 데모 만들어 보기
주요 속성과 함수, 이벤트 몇 가지를 응용하여 비디오 재생을 제어하는 간단한 데모를 만들어 보자

- 데모 실행 화면
아래 화면은 데모를 구글 크롬에서 실행한 화면이다.
progress 이벤트에서 구현한 데이터 로딩 부분이 정상 동작 하지 않는다(하단 undefined) 
재생, 정지, 음소거, 볼륨 등은 모두 정상 동작한다
  

그리고 아래 화면은 파이어폭스에서 데모를 실행한 화면이다
파이어폭스의 경우 모든 기능이 잘 동작한다(데이터 로딩 부분 역시 정상 동작함)
그러나 볼륨을 위한 range input 컨트롤이 아직 지원되지 않는 것 같다


이렇듯 브라우저별로 몇 가지 상이한 동작을 하는 것은 HTML5 가 아직 표준화가 완료되지 않는 것을 의미한다. 이제 데모 코드를 살펴 보자
<!DOCTYPE html>
<html>
<head></head>
<body>
  <video id="video1" controls   
             src="http://www.double.co.nz/video_test/transformers480.ogg"></video>   
  <br>
  <button onclick="play()">재생</button>
  <button onclick="pause()">일시정지</button> 
  <button onclick="mute()">음소거</button> 
  
  볼륨:<input id="volumecontrol" type="range" max="1" step="any" onchange="updateVolume()">
  
  <div id="time"></div>
  <div id="downLoadState"></div>
</body>
</html>

<script type="text/javascript"> 
  var video1 = document.getElementById("video1");    
            
  //비디오 재생  
  function play(){
    video1.play();
    video1.volume = volumecontrol.value;    
  }  
  //비디오 일시정지
  function pause(){
    video1.pause();
  }     
  //음소거
  function mute(){
    video1.muted = !video1.muted;
  }  
  //볼륨조절        
  function updateVolume() {
    video1.volume = volumecontrol.value;
  }  
  
  //timeupdate 이벤트 구현(재생시간 현황 표시)
  video1.addEventListener("timeupdate", 
    function(){        
      document.getElementById("time").innerHTML = 
               Math.floor(video1.currentTime) + "/" + Math.floor(video1.duration) + "(초)";
    }
    , false
  );   
     
  //progress 이벤트 구현(비디오 다운로드 현황 표시)
  video1.addEventListener("progress",
    function(e){
      var downLoadState = document.getElementById("downLoadState");
      
      if(video1.networkState == 2){
        downLoadState.innerHTML = e.loaded + "/" + e.total + "byte";        
      }
      else if(video1.networkState == 3){
        downLoadState.innerHTML = "완료";
      }
    }
    , false
  );        
</script>


브라우저 호환성 확보
앞서 Video, Audio 에 대한 브라우저 지원 현황을 알아 보았다
Video, Audio 는 두 가지 지원 현황을 파악해야 한다고 했는데 요약하자면 다음과 같다
1) Video, Audio 지원 현황
2) 코덱 지원 현황

즉 브라우저가 Video, Audio 자체를 지원하다고 하더라도 지원되는 코덱이 서로 상이하기 때문에
브라우저가 지원하는 코덱정보를 정확히 알고 있어야 원활한 서비스가 가능하다는 것이다

HTML5 멀티미디어 구현을 위해 브라우저 호환성을 확보하기 위한 모든 방법을 알아 보자

1) Video 지원 여부 확인하기
앞에서 알아 본 방법이다. 
if(!!document.createElement('video').canPlayType) ...
으로 브라우저가 Video 태그를 지원하는지 체크할 수 잇다

2) 대체 요소 출력
역시 앞에서 알아 본 방법이다. 태그 사이에 대체 요소를 출력한다
<video src="http://www.double.co.nz/video_test/transformers480.ogg">
    HTML5 Video 를 지원하지 않는 브라우저 입니다
</video> 

3) 코덱 호환성 확보
마지막으로 브라우저별로 상이한 코덱 지원을 검사하여 정상적인 동작을 보장해야 한다
예를들어 사파리의 경우 H.264 를 지원하고 파이어폭스의 경우 Theora를 지원하기 때문에
모든 브라우저에서 정상 동작 시키기 위해서는 각 브라우저가 지원하는 형식으로 서비스를 해야 한다

브라우저가 특정 코덱을 지원하는지 검사하려면 Video 의 canPlayType() 함수를 이용하면 된다
아래 코드는 theora 비디어코덱과 vorbis 오디오 코덱으로 구성된 ogg컨테이너 형식의 멀티미디어를
지원하는지 체크하는 코드이다
var video1 = document.getElementById("video1");
return video1.canPlayType('video/ogg; codecs="theora, vorbis"'


그리고 더 쉽게 코덱 호환성을 확보 할 수 있는 방법이 있는데, 
바로 <video>,<audio> 태그 사이에 정의되는 <source> 태그를 이용하는 방법이다
<soruce> 태그는 멀티미디어 파일의 위치(소스)를 지정하는 src 속성의 역할과 동일하다

다만 이 태그는 여러개를 중복해서 정의할 수 있는데, 이 경우 멀티미디어 파일의 형식 즉 코덱정보를 명시하여 지정할 수 있다. 브라우저는 여러개의 <source> 태그를 차례대로 검사해서 자신이 지원하는 코덱과 일치하는 <source> 를 채택하여 재생시킨다

그리고 <source> 태그를 이용하면 HTML5 이전의 멀티미디어 환경 즉 플래시나 실버라이트와 같은
형식의 지정도 가능하다. 즉 브라우저가 HTML5 자체를 지원하지 않을 경우 플래시로 대체하는 코드 작성이 가능하다는 것이다(물론 각 버전에 맞는 동영상이 미리 준비되어 있어야 겠지만...)

결과적으로 <soruce> 태그를 이용하여 코덱과 관련한 브라우저 호환성을 쉽게 확보할 수 있는 것이다
아래 코드는 코덱 호환성 확보를 위한 몇 가지 샘플 코드이다
(출처: http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/)
- ogv 와 mp4 지원
<video controls>
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
video not supported
</video>

- ogv, applet 지원
<video controls>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(this.parentNode)">
<object type="application/x-java-applet" width="480" height="288">
  <param name="archive" value="cortado-ovt-stripped-wm_r51500.jar">
  <param name="code" value="com.fluendo.player.Cortado.class">
  <param name="url" value="video.ogv">
  video and Java not supported
</object>
</video>

- mp4, swf 지원
<video controls>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
         onerror="fallback(this.parentNode)">
<object data="videoplayer.swf">
  <param name="flashvars" value="video.mp4">
  video and Flash not supported
</object>
</video>

HTML Video, Audio 태그가 지원되지 않을 때 플래시나 윈도우 미디어로 대체하는 스크립트를
제공해 주는 다음의 사이트를 참고하기 바란다


마지막으로 Video, Audio 와 관련된 데브 오페라 사이트를 참고해 추가 학습하도록 하자
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
추천 0

등록된 댓글이 없습니다.

검색취소

UCC,스트리밍 관련 자료

검색
  • Http Live Streaming 으로 아이폰 동영상 서비스
  • Http Live Streaming 으로 아이폰 동영상 서비스

    이 문제로 무려 세번의 리젝트를 얻어 드시고 드디어 찾아낸 방법을 올린다.이전에는 그런게 없었던것 같은데 2010년 10월경에 Developer Guide 가 새로 올라오면서 동영상쪽에 새로운정말 까탈스러운 기준이 …

  • no image
  • RED5 FFMPEG FFserver 스트리밍 서버 구축하기

    Posted on 2009/02/25 16:19Filed Under 리눅스기술문서/서버관련 조회수: view 5044RED5 FFMPEG FFserver 스트리밍 서버 구축하기작성자 : 서진우(alang@syszone.co.kr)작성일 : 2009년 1월 5일4.1 FFMPEG로 인코딩 환경 구축하기 - 기본 프로그램 설치# yum install ruby# yum install ncurses-devel*# yum install lame# yum install libogg# yum install libvorbis# yum install flvtool2# yum install ffmpeg- 코덱 설치# wget http://www3.mplayerhq.hu/MPlayer/releases/codecs/essential-20061022.tar.bz2# bunzip2 essential-20061022.tar.bz2# tar xvf essential-20061022.tar# mkdir /usr/local/lib/codecs/# mv essential-20061022/* /usr/local/lib/codecs/# chmod -R 755 /usr/local/lib/codecs/# vi /etc/ld.so.conf# ldconfig- ffmpeg 기본 사용법AVI -> FLV# ffmpeg -i onestar.avi -ar 22050 -ab 32 -f flv -s 640x480 onestar.flv | flvtool2 -U stdin onestar.flv-i             : input file name-ar          : audio sampling rate in HZ-ab          : audio bit rate in kbit/s-f             : output format-s             : output dimensionFLV -> JPG# ffmpeg -i test.flv -an -r 1 -y -s 640x480 test%d.jpg-i             : input file name-an         : disable audio -r            : fps-y           : overwrite file-s            : output dimensionParticular frame to JPG# ffmpeg -i test.flv -an -ss 00:00:10 -t 00:00:01 -r 1 -y -s 640x480 test%d.jpg-ss          : recored start time-t            : record end time last for- ffmpeg 실무 사용법ffmpeg를 이용하여 avi 파일을 flv로 변환 한다.# ffmpeg -i onestar.avi -b 512k -ar 22050 -ab 128k -r 24 -s 400x300 onestar.flv or# ffmpeg -i "onestar.avi" -vcodec flv -f flv -r 29.97 -s 400x300 -aspect 4:3 -b 320k -g 160 -cmp 2 -subcmp 2 -mbd 2 -flags aic cbp mv0 mv4 trell -ac 1 -ar 22050 -ab 128k "onestar.flv"- FLV에 메타데이터 넣기 (스트리밍 보기-중간 구간 바로 보기)# flvtool2 -U onstar.flv- 동영상 썸네일 만들기# ffmpeg -y -i onestar.avi -vframes 1 -ss 00:00:02 -an -vcodec png -f rawvideo -s 400x300 onestar.png# ffmpeg  -itsoffset -4  -i test.avi -vcodec mjpeg -vframes 1 -an -f rawvideo -s 320x240 test.jpg- 동영상에 자막 넣기동영상을 flv 로 변환할때 자막을 같이 넣을 경우 기존의 ffmpeg로는 자막 포함 기능이 제공되지 않는다. 자막을 포함하여 인코딩을 할 수 있는 프로그램으로 mencoder이 있다.설치는 yum으로 쉽게 가능하다.# yum install mencoder설치 후 자막의 언어 설정을 아래와 같이 한다.$ vi ~/.mplayer/mencoder.conf-------------------------------------------------------------------------font="/usr/share/fonts/korean/TrueType/gulim.ttf"subfont-text-scale=3subcp=cp949-------------------------------------------------------------------------이제 mencoder로 자막을 포함해서 인코딩을 한다.$ mencoder -noodml [avi파일]  -o [flv파일]  -sub $1.smi -of lavf -oac mp3lame -lameopts abr:br=128 -ovc lavc -lavcopts vcodec=flv:vbitrate=512:mbd=2:mv0:trell:v4mv:cbp:last_pred=3 -srate 44100 -lavfopts i_certify_that_my_video_stream_does_not_use_b_frames -vf-add scale=400:300- 웹 FLV_Player 연동하기웹에서 FLV 파일을 스트리밍으로 볼수 있는 Player는 여러가지가 있다.* UCCUP에서 제공하는 Player - http://www.uccup.kr* http://flowplayer.org/download.html* GRZ_JWMediaPlayer- UCCUP Player 연동하기아래 구문중 flv 파일명과 png 파일명을 수정 후 HTML 문서에 붙여 넣는다. flv,png 파일은 [UCCUP설치경로]/SERVICE 디렉토리 밑에 복사해 둔다.- GRZ_JWMediaPlayer 연동하기아래는 textcube의 플러그인으로 연동된 GRZ_JWMediaPlayer를 이용하는 방법이다.[Flash] - FlowPlayer 연동하기기본 연동법 ------------------------------------------------------------------------------------            --------------------------------------------------------------------------------------or --------------------------------------------------------------------------------------flowplayer("player", "./flowplayer-3.0.2.swf");--------------------------------------------------------------------------------------or --------------------------------------------------------------------------------------flowplayer("player", "./flowplayer-3.0.2.swf", {    clip: {        url: 'http://syszone.co.kr/yaejin/data/11.flv',        autoPlay: false,        onStart: function(clip) {            pageTracker._trackPageview("configuration demo: " clip.url);        }    }});---------------------------------------------------------------------------------------or (youtube 방식의 동영상 라이브러리 구현)---------------------------------------------------------------------------------------http://syszone.co.kr/yaejin/jquery.min.js">http://syszone.co.kr/yaejin/flowplayer-3.0.2.min.js">http://syszone.co.kr/yaejin/flowplayer.playlist-3.0.1.min.js">/* player style *//* container has a background image */a.player {        margin-top:40px;        display:block;        background:url(http://syszone.co.kr/yaejin/img/splash.png) no-repeat;        width:425px;        height:298px;        padding:0 126px 75px 127px;        text-align:center;        color:#fff;        text-decoration:none;        cursor:pointer;}/* splash image */a.player img {        margin-top:115px;        border:0;}#player {        float:left;}/* playlist style */#playlist {        width:300px;        height:380px;        overflow-y:auto;        overflow-x:hidden;        border:1px solid #ccc;        padding:4px 10px 12px 10px;        background-color:#efefef;        margin-top:20px;        float:left;}/* playlist entry */#playlist a {        display:block;        width:260px;        height:60px;        padding:7px;        background-color:#fff;        border:1px solid #ccc;        font:11px "bitstream vera sans", "lucida grande",verdana;        text-decoration:none;        margin-top:7px;        color:#666;}/* different states of a playlist entry */#playlist a:hover {        background-color:#ffc;}#playlist a.progress {        background-color:#efefef;}#playlist a.playing {        border:1px solid #666;        background-color:#ffc;}#playlist a.paused {        border:1px solid #666;        background-color:#ffc;}/* elements inside playlist entry */#playlist a img {        border:0;        float:left;        margin-right:10px;}#playlist a strong {        color:blue;        padding-bottom:5px;}#playlist a em {        border:0;            float:left;        margin-right:10px;        background:url(http://syszone.co.kr/yaejin/img/clock.gif) no-repeat 0 50%;        padding-left:20px;        color:#333;        font-style:normal;        margin-top:10px;}$(function() {        // setup player        $f("player", "flowplayer-3.0.2.swf", {                clip: {baseUrl: 'http://syszone.co.kr/yaejin/data'}        // playlist plugin        }).playlist("#playlist");});        071202-탄생1071202-탄생2..------------------------------------------------------------------------------------- Encoding 관련 스크립트 제작ffmpeg를 이용하여 avi 파일을 flv로 변환하는 스크립트# vi /usr/bin/ffmpeg_encoder.sh [filename] [geometry]-----------------------------------------------------------------------------------#!/bin/shif [ $# -lt 2 ]thenecho -n "using : ffmpeg_encoder.sh ( movie 400x300 )";exit;fiffmpeg -i $1.avi -b 512k -ar 22050 -r 24 -ab 128k -s $2 $1.flv ffmpeg -y -i $1.avi -vframes 1 -ss 00:00:02 -an -vcodec png -f rawvideo -s $2 $1.pngflvtool2 -U $1.flvecho -n "--------------------------------------------------------$1.avi completed $1.flv to encoding..!!--------------------------------------------------------";----------------------------------------------------------------------------------mencoder를 이용하여 avi파일과 smi 자막파일을 flv 파일로 변환하는 스크립트# vi /usr/bin/mencoder_encoder.sh ----------------------------------------------------------------------------------#!/bin/shif [ $# -lt 3 ]thenecho -n "using : mencoder_encoder.sh ( movie 400 300 )";exit;fimencoder -noodml $1.avi -o $1.flv -sub $1.smi -of lavf -oac mp3lame -lameopts abr:br=128 -ovc lavc -lavcopts vcodec=flv:vbitrate=512:mbd=2:mv0:trell:v4mv:cbp:last_pred=3 -srate 44100 -lavfopts i_certify_that_my_video_stream_does_not_use_b_frames -vf-add scale=${2}:${3}ffmpeg -y -i $1.avi -vframes 1 -ss 00:00:02 -an -vcodec png -f rawvideo -s ${2}x${3} $1.pngflvtool2 -U $1.flvecho -n "--------------------------------------------------------$1.avi completed $1.flv to encoding..!!--------------------------------------------------------";---------------------------------------------------------------------------------디렉토리내 flv 파일을 UCCUP Player에서 인식할 수 있는 HTML 코드로 변환하는 스크립트# vi /usr/bin/convert_flvhtml.sh--------------------------------------------------------------------------------#!/bin/shrm -f source.htmlls -1 *.flv | sed -e 's/\.flv//g' > filelistA=`cat filelist`for B in `echo $A`doecho -n "" >> source.htmldone---------------------------------------------------------------------------------4.2 RED5 를 이용한 스트리밍 서비스 환경 구축하기 - Red5 설치하기ant download :  http://ant.apache.org/bindownload.cgired5 download : http://osflash.org/red5jdk download : http://java.sun.com각 사이트에서 최신 패키지를 다운받는다.apache-ant-1.7.1-bin.tar.gzred5-0.7.0.tar.gzjdk-6u11-linux-x64-rpm.bin- JDK 설치하기# chmod 755 jdk-6u11-linux-x64-rpm.bin # ./jdk-6u11-linux-x64-rpm.bin --------------------------------------------------------------------------------..Do you agree to the above license terms? [yes or no]              yesUnpacking...Checksumming...Extracting...UnZipSFX 5.50 of 17 February 2002, by Info-ZIP (Zip-Bugs@lists.wku.edu).  inflating: jdk-6u11-linux-amd64.rpm    inflating: sun-javadb-common-10.4.1-3.1.i386.rpm    inflating: sun-javadb-core-10.4.1-3.1.i386.rpm    inflating: sun-javadb-client-10.4.1-3.1.i386.rpm    inflating: sun-javadb-demo-10.4.1-3.1.i386.rpm    inflating: sun-javadb-docs-10.4.1-3.1.i386.rpm    inflating: sun-javadb-javadoc-10.4.1-3.1.i386.rpm  준비 중...                  ########################################### [100%]..Press Enter to continue.....Done./usr/java 디렉토리 밑에 설치 완료 .- Ant 설치하기# tar xzvf apache-ant-1.7.1-bin.tar.gz # mv apache-ant-1.7.1 /usr/local/ant- Red5 설치하기# mkdir /usr/local/red5# tar xzvf red5-0.7.0.tar.gz -C /usr/local/red5- 환경설정하기# vi /etc/profile.d/ant_java.sh -----------------------------------------------------------------------------#!/bin/shexport JAVA_HOME=/usr/java/defaultexport JAVA_VERSION=1.6export ANT_HOME=/usr/local/antexport PATH=${ANT_HOME}/bin:${JAVA_HOME}/bin:$PATH----------------------------------------------------------------------------# source /etc/profile.d/ant_java.sh # java -versionjava version "1.6.0_11"Java(TM) SE Runtime Environment (build 1.6.0_11-b03)Java HotSpot(TM) 64-Bit Server VM (build 11.0-b16, mixed mode)- RED5 컴파일 및 데몬 시작하기http://osflash.org/red5 에서 final 바이너리 패키지를 받은 경우 별도의 컴파일없이 바로 실행이 가능하다.# cd /usr/local/red5# sh red5.shsvn를 통해 코드를 받은 경우 아래와 같이 컴파일을 해줘야 한다.# cd /usr/local# svn co http://red5.googlecode.com/svn/java/server/trunk red5src# cd red5방법1 :# cd /usr/local/red5src# ant server &# /usr/local/ant/bin/ant # cp -a /usr/local/red5src/dist /usr/local/red5# cd /usr/local/red5# ./red5.sh &방법2 :# cd /usr/local/red5src# make# make install# cd /usr/lib/red5# ./red5.sh &방법 3 :# cd /usr/local/red5src# ant prepare# ant buildTarget "build" does not exist in the project "RED5". 라는 에러가 발생했을 경우# antor# ant -f build.xml# cp -a dist /usr/local/red5# cd /usr/local/red5# sh red5.sh &;; 3번 권장함최신버전으로 컴파일 시 간혹 아래와 같은 에러가 발생하는 경우가 있다.------------------------------------------------------------------------.[ivy:resolve]           :: spring#spring-support;2.0.8: not found[ivy:resolve]           :: javax#jsp-api;2.1: not found[ivy:resolve]           :: red5#xercesImpl;2.9.0: not found[ivy:resolve]           :: red5#groovy;1.0: not found[ivy:resolve]           :: commons#commons-lang;2.3: not found[ivy:resolve]           :: tomcat#jasper;6.0.14: not found[ivy:resolve]           ::::::::::::::::::::::::::::::::::::::::::::::[ivy:resolve][ivy:resolve] :: USE VERBOSE OR DEBUG MESSAGE LEVEL FOR MORE DETAILSBUILD FAILED/usr/local/red5-0.7.0/build.xml:205: The following error occurred while executing this line:/usr/local/red5-0.7.0/build.xml:221: The following error occurred while executing this line:/usr/local/red5-0.7.0/build.xml:165: impossible to resolve dependencies:        resolve failed - see output for details ------------------------------------------------------------------------위 문제는 ivy 라는 패키지 관리 도구에서 red5 컴파일 시 필요한 패키지를 사전에 정의된패키지 저장소에서 자동으로 다운로드 받게 되는데, 필요한 패키지를 찾을 수 없을때 발생한다. ivy.xml 와 ivysettings.xml 파일에 다운로드 경로 정보가 있는데, 이것이 변동된 경우 발생하니ivysettings.xml 에서 http://red5.googlecode.com/svn/trunk/repository/ 부분을 http://red5.googlecode.com/svn/repository 로 수정하거나 최신 해당 파일을 다운로드 받으면된다.- Init script 만들기# vi /etc/rc.d/init.d/red5--------------------------------------------------------------------------#!/bin/sh## Startup script for Red5 flash streaming server## chkconfig: 345 81 81# description: RED5 by java## processname: java (unfortunately)# pidfile: /var/run/red5.pid# config: /etc/red5.conf# Source function library.. /etc/rc.d/init.d/functionsPID_FILE=/var/run/red5.pidPID=`ps ax |grep java|grep red5|awk '{print $1;}'`RETVAL=0start() {echo -n $"Starting $DESCR: "# daemon java $OPTIONS > /dev/null 2>&1 &export ANT_HOME=/usr/local/antexport JAVA_HOME=/usr/java/defaultexport PATH=$PATH:$JAVA_HOME/bin:$ANT_HOME/binexport CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jarexec $JAVA_HOME/bin/java -Djava.security.manager -Djava.security.policy=/usr/local/red5/conf/red5.policy -cp /usr/local/red5/red5.jar:conf:/usr/local/red5/conf org.red5.server.Standalone > /dev/null 2>&1 & RETVAL=$?[ $RETVAL = 0 ] && touch /var/lock/subsys/red5 && echo $!>$PID_FILE && echo_successechoreturn $RETVAL}stop() {echo -n $"Stopping $DESCR: "#killproc $PID_FILE[[ $PID != "" ]] && success && kill $PID || failureRETVAL=$?echo[ $RETVAL = 0 ] && rm -f /var/lock/subsys/red5 $PID_FILE}# See how we were called.case "$1" instart)start;;stop)stop;;restart)stopsleep 3start;;*)echo $"Usage: $DESCR {start|stop|restart}"exit 1esacexit $RETVAL----------------------------------------------------------------------------# chmod 755 /etc/rc.d/init.d/red5# chkconfig --add /etc/rc.d/init.d/red5# /etc/rc.d/init.d/red5 start- red5 spec file----------------------------------------------------------------------------Summary: Red5 ServerName: red5Version: 0.7.0Release: 1Source0: %{name}-%{version}.tar.gzLicense: LGPLGroup: Applications/NetworkingBuildRoot: %{_builddir}/%{name}-rootscriptionThe Red5 open source Flash server allows you to record and stream video to the Flash Player.%prep%setup -q%buildant dist-installer%installcp dist $RPM_BUILD_ROOT%cleanrm -rf $RPM_BUILD_ROOT%filesfattr(-,root,root)/usr/local/bin/red5.init%doc doc/changelog.txt------------------------------------------------------------------------------- Red5를 이용한 flv 동영상 스트리밍 Player 환경 구성하기flash_media_player.zip 파일을 다운로드 받는다.http://www.jeroenwijering.com/upload/flash_media_player.zip# cp mediaplayer.html index.html# vi index.html------------------------------------------------------------------------------http://www.macromedia.com/go/getflashplayer">Get the Flash Player to see this player.        var s2 = new SWFObject("mediaplayer.swf","playlist","640","640","9");        s2.addParam("allowfullscreen","true");        s2.addVariable("file","playlist.xml");        s2.addVariable("displayheight","480");        s2.addVariable("backcolor","0x000000");        s2.addVariable("frontcolor","0xCCCCCC");        s2.addVariable("lightcolor","0x996600");        s2.write("player2");----------------------------------------------------------------------------------# vi playlist.xml----------------------------------------------------------------------------------                        Resident.Evil.Degeneration.2008        alang        rtmp://syszone.co.kr/oflaDemo/        residentevil.flv        rtmp                ..----------------------------------------------------------------------------------위의 rtmp://syszone.co.kr/oflaDemo/ 에 해당 red5 streams 디렉토리경로를 지정한다.기본 경로는 [RED5_PATH]/webapps/oflaDemo/streams 디렉토리 밑에 flv 파일을 넣어두면된다.- RED5와 OpenLaszlo를 이용한 스트리밍 환경 구축하기http://www.openlaszlo.org 에서 최신 패키지를 다운받는다.최신 개발 패키지  : http://download.openlaszlo.org/nightly/trunk# tar xzvf openlaszlo-4.2.0-unix.tar.gz# mv lps-4.2.0 /usr/local/lps# cd /usr/local/lps/Server/tomcat-5.0.24/bin# ./startup.sh ----------------------------------------------------------------------------------Using CATALINA_BASE:   /usr/local/lps/Server/tomcat-5.0.24Using CATALINA_HOME:   /usr/local/lps/Server/tomcat-5.0.24Using CATALINA_TMPDIR: /usr/local/lps/Server/tomcat-5.0.24/tempUsing JAVA_HOME:       /usr/java/default----------------------------------------------------------------------------------http://domain:8080/lps-4.2.0/demos/# cd /usr/local/lps/Server/lps-4.2.0/demos/videolibrary# vi videolibrary.lzx ---------------------------------------------------------------------------------- -> 삭제..    이 부분을 ..    으로 ..     이 부분을 ..    으로 변경 ----------------------------------------------------------------------------------# vi videolibrary.jsp ---------------------------------------------------------------------------------    public String libraryDirectory =        "/home/fms/applications/test/streams/instance1/"; --> 이부분을 .. "/usr/local/red5/webapps/oflaDemo/streams/" 으로 ..    public String libraryUrl =        "rtmp://localhost/test/instance1/"; --> 이부분을  "rtmp://domain/oflaDemo/"; 으로 ..---------------------------------------------------------------------------------아래 주소로 접속하면 확인이 가능하다.http://192.168.123.2:8080/lps-4.2.0/demos/videolibrary/videolibrary.lzx;; flv 파일명이 한글이면 안된다. ;; flv 파일 리스트와 썸네일이 보이지 않는다.- thumbnail 관련 임시 조치# cd /usr/local/lps/Server/lps-4.2.x/demos/videolibrary# vi videolibrarythumbnail.lzx --------------------------------------------------------------------------------.        --------------------------------------------------------------------------------resources="원하는 thumbnail 파일 경로" 적어 준다.....ㅠ.ㅠ- lps URL 변경# cd /usr/local/lps/Server/tomcat-5.0.24/conf/LPS/localhost# vi lps.xml--------------------------------------------------------------------------------위의 path="" 에 url에 표시될 alias명을 적는다.http://domain:8080/- SOLO 기능 이용하기solo 는 laszlo에서 개발된 내용을 HTML과 swf 형태로 변경해 주는 관리 기능이다.실제 laszlo로 미디어 관련 어플리케이션을 개발한 후 최종적으로는 solo를 이용하여웹 컨텐츠 형태로 변형 시켜 사용한다.solo 버턴을 클릭하면 해당 컨텐츠가 zip 파일로 압축된다. 압축 파일 위치는 /usr/local/lps/Server/lps-4.2.x/lps/admin 이다.웹서버의 적당한 디렉토리 및에 해당 파일을 풀고 사용하면 된다.4.3 WebCam 설치하기- webcam driver 다운로드$ wget http://mxhaard.free.fr/spca50x/Download/gspcav1-20071224.tar.gz$ wget http://forums.quickcamteam.net/attachment.php?aid=86 -O patch.tar.gz- driver 패치 및 설치$ tar -xvf gspcav1-20071224.tar.gz$ tar -xvf patch.tar.gz$ cd gspcav1-20071224 $ patch -p1 > gspca.ko파일이 생성된다.$ lsmod | grep gspca            // videodev가 보일것이다.$ rmmod gspca$ modprobe -v gspca >> insmod /lib/modules/2.6.18-92.el5/kernel/driver/usb/media/gspca.ko대략 저러한것들이 보인다.없을 경우..  $ rmmod gspca$ mv gspca.ko /lib/modules/2.6.18-92.el5//kernel/driver/media/video/$ modprobe gspca위와 같이 해당위치에 파일을 옮겨주다.# cd /lib/modules# depmod -a 2.6.18-92.el5# mknod /dev/video0 c 81 0 # ln -sf /dev/video0 /dev/video- webcam viewer 설치 (xawtv)# yum install xawtv

  • no image
  • ios html5 audio 연속 재생

     //오디오 부분의 id를 가져온다 var audioid = document.getElementById("audioid");//파일 재생이 완료되었을 때 다음 파일로 재생을 하도록한다.audioid…

  • no image
  • 의 속성과 메소드March 9, 2011 taggon Tip&Tech, 7이 글은 HTML5, 그리고  시리즈의 전체 3개 중 3번째 글입니다.HTML5, 그리고 태그코덱 전쟁의 속성과 메소드지난 글을 통해 HTM…

  • [HTML5] VIDEO & AUDIO
  • [HTML5] VIDEO & AUDIO

    [HTML5] VIDEO & AUDIOPOSTED IN 모바일, 그리고 웹(WEB)/HTML5 // POSTED AT 2010/08/24 13:39멀티미디어 지원HTML 5 를 지원하는 브라우저는 비디오, 오디오와 …

?>