홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
okTrot(구독해주세요)
앵콜트로트(구독해주세요)
뽕짝아가씨(구독해주세요)
음악가사 검색
온라이브스토어(앱다운로드)
온라이브(방송등록및청취)
비디오 베스트 50
금영노래방
TJ노래방
유튜브 동영상 다운로드
POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
운.영.자.1대1.상담
FAQ\지원.프로그램
Q&A\고.객.지.원

자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
[HTML5] Video & Audio
2년 전
멀티미디어 지원
HTML 5 를 지원하는 브라우저는 비디오, 오디오와 같은 멀티미디어 형식을 자체적으로 지원한다
HTML 5 는 이러한 멀티미디어 파일을 웹 페이지에 삽입할 수 있는 태그를 정의하고 있으며
재생과 관련한 각종 제어를 수행할 수 있는 스크립트 API가 제공된다

이전의 브라우저 환경
HTML 5가 등장하기 전, 브라우저 환경에서는 멀티미디어 재생을 자체적으로 할 수 없었다
대신 외부 기술, 즉 브라우저에 별도로 설치되는 플러그인(Plug in)의 힘을 빌어 멀티미디어를 표현할 수 있었다. 멀티미디어 재생을 위한 플로그인 기술로는 다음과 같은 것들이 있다
- 윈도우 미디어 플레이어
- 어도비 플래시 플레이어
- 애플 퀵타임 플레이어
- 마이크로소프트 실버라이트

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

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

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

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


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 들을 확인해 보기 바란다


http://www.w3schools.com/html5/tag_video.asp
http://www.w3schools.com/html5/tag_audio.asp


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

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

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

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

비디오 데모 만들어 보기
주요 속성과 함수, 이벤트 몇 가지를 응용하여 비디오 재생을 제어하는 간단한 데모를 만들어 보자
<!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 태그가 지원되지 않을 때 플래시나 윈도우 미디어로 대체하는 스크립트를
제공해 주는 다음의 사이트를 참고하기 바란다
http://mediaelementjs.com/

마지막으로 Video, Audio 와 관련된 데브 오페라 사이트를 참고해 추가 학습하도록 하자
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
추천추천 : 151 추천 목록
번호 제목
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
2,985
 jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
2,984
 jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
2,983
 jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
2,982
 jquery 스크립트내 특정값 확인하기 (디버깅)
2,981
 jquery cookie (jquery.cookie.js)
2,980
 jquery div 기본 넓이, 높이 계산 및 padding, border 포함 하기
2,979
 jquery 다른버전 추가 사용시 충돌 방지 (카페24 스마트디자인 기본내장 jquery 1.4.4 버전과 충돌시 해결방법)
2,978
 특정 페이지 종료시 확인 경고창 출력
목록
추천음악방송
인기절정뽕짝파티
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
앵콜트로트
뽕짝아가씨
작은 음악다방
종합성인가요방
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
Dance&Remix
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
JP\CN
POP TOP BEST
K.R.노래방

추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요1번지(종합)
뮤직하우스
동요\연변\반주\기타
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
추천가요\POP\기타
최신가요\인기가요
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.