* 이제 html5 태그상에서 지원해주는 video와 audio에 대해서 공부해보자.

2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황

2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점

2012/11/05 - [HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화

2012/11/18 - [HTML5 튜토리얼] Canvas 기초 강좌

* Video와 Audio?

: 기존의 웹이라하면 텍스트와 정보 기반으로 형성되어왔다면 이제는 다양한 창의적인 표현과 데이터 비쥬얼라이제이션과 정보를 잘 효과적으로 보여주는 것이 중요해지면서 그래프나 다양한 그래픽과 미디어들이 활용되기 시작했다. 이제 HTML5에서는 SVG와 자바스크립트를 통해 이러한 환경을 다루고자 하고 있다.

: HTML5 에서는 다른 추가 플러그인 없이 비디오와 오디오의 미디어에 대한 재생이 가능하도록 지원해주고 있다. 기존에는 웹페이지에 동영상을 넣는다면 플래시, 실버라이트, 액티브X등 다양한 플러그인들이 존재했지만 이제는 브라우져 자체에서 동영상 기능을 지원해주기 시작한 것이다. 그리고 자바스크립트를 이용하면 미디어의 재생와 일시정지를 하는 것이 가능하고, 캔버스와 조합하게 되면 다양한 

* <video> 태그

: 바로 예제를 보자.

<video controls
  src="http://media.w3.org/2010/05/bunny/movie.ogv">
Your user agent does not support the HTML5 Video element.
</video>

: 이전에는 <embedded 를 사용해서 플레이러를 가져오던가 플래시를 가져오던가 해서 동영상을 많이 제공했는데 이제는 고품질의 동영상을 위와 같이 간단한 태그 하나로 제공해줄 수 있게 되었다.

: video 태그의 attribute들을 알아보자.

: 이러한 속성들 말고도 비디오태그 안에 다시 <source> 태그가 부여 가능하다. source 태그를 이용하는 경우에는 사용자의 코덱에 따라 재생가능한 소스를 택해서 재생해주게 된다.

<video controls>
 <source src="http://media.w3.org/2010/05/sintel/trailer.mp4"
         type='video/mp4; codecs="avc1, mp4a"'>
 <source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
         type='video/ogg; codecs="theora, vorbis"'>
 <p>Your user agent does not support the HTML5 Video element.</p>
</video>

: 이렇게 태그를 추가하고나서 controls 속성을 추가하는것 이외에도 외부의 UI 위젯과 자바스크립트를 통해서 video를 제어할 수 있다. 아래는 간단하게 버튼을 이용해서 비디오를 제어하는 예이다.

<video id="myVideo">
 <source src="http://media.w3.org/2010/05/sintel/trailer.mp4"
         type='video/mp4; codecs="avc1, mp4a"'>
 <source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
         type='video/ogg; codecs="theora, vorbis"'>
 Your user agent does not support the HTML5 Video element.
</video>
<button type="button" onclick="vid_play_pause()">Play/Pause</button>
<script>
function vid_play_pause() {
  var myVideo = document.getElementById("myVideo");
  if (myVideo.paused) {
    myVideo.play();
  } else {
    myVideo.pause();
  }
}
</script>
 

: 위와 같이 자바스크립트로 getElementById로 video태그를 가져와서 제어를 할 수 있는데, video를 가져왔을 때 사용할 수 있는 함수들과 속성들을 살펴보면 아래와 같다. (위의 소스에서 myVideo의 속성과 함수를 살펴보는 것이다.)

: video 자바스크립트 객체의 속성들을 알아보자. 우선 태그의 속성과 공통적인 속성들이 있다.

: 그리고 자바스크립트에서 제어를 목적으로 접근할수 있는 속성들이 있다.

: 위의 속성들을 바꿔줌으로써 video의 상태들을 제어할 수 있게 된다. 이러한 속성들 이외에도 제어를 위한 함수들도 있다.

: 위의 canPlayType의 인자인 type가 가지는 값들은 아래와 같은 값들을 가지는 것이 보통이다.

• video/ogg
• video/mp4
• video/mp4
• audio/mpeg
• audio/ogg
• audio/mp4

: 또는 코덱까지 포함하는 값을 가지기도 한다.

• video/ogg; codecs="theora, vorbis"
• video/mp4; codecs="avc1.4D401E, mp4a.40.2"
• video/webm; codecs="vp8.0, vorbis"
• audio/ogg; codecs="vorbis"
• audio/mp4; codecs="mp4a.40.5"

: 그럼 함수에서는 아래의 값들을 리턴하게 된다.

• "probably" - 거의 지원
• "maybe" - 지원할수도 있음
• "" - 지원 안함

: 현재는 코덱을 인자로 같이 넘겨주는 경우 "probably"로 리턴한다고 하니, 스펙이 계속 갱신되면서 어떻게 변화질지는 눈여겨 봐두는 것이 좋겠다.

* <audio> 태그

: 역시 바로 예제를 보자.

<audio controls
  src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">
Your user agent does not support the HTML5 Audio element.
</audio>

: 비디오와 유사하다. 내부에 몇가지의 <source>를 둬서 재생 가능한 쪽을 선택해서 재생하게 된다.

<audio controls>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

: 역시 외부의 UI를 통해서 제어를 할수 있는 것 또한 같다.

<audio id="myAudio">
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" onclick="aud_play_pause()">Play</button>
<script>
function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
</script>

: 이렇게 video와 거의 비슷한 형태를 가지고 attribute들도 크기를 지정하는 것만 빼면 거의 같다.

: 자바스크립트를 통해서 위의 속성들을 접근할수 있으며, video와 같이 제어와 관련된 속성들도 있다.

: video와 같이 위의 속성들을 바꿔줌으로써 audio의 상태들을 제어할 수 있게 된다. 이러한 속성들 이외에도 제어를 위한 함수들도 있다.

: <video>와 <audio>는 거의 같은 속성과 함수들을 공유하기 때문에 한 쪽을 익히면 다른 한쪽도 쉽게 익숙해질 수 있을 것이다.

* <video>와 <audio>의 이벤트들

: 단순히 보여주기만 해서는 기존의 다양한 플러그인들을 대체할 수는 없을 것이라는 생각이 들기도 했을 것이다. 따라서 위의 자바스크립트 제어 이외에도 자바스크립트로 video와 audio의 상태 변화에 대한 이벤트 또한 다양하게 UX를 증진시키는데 중요한 역할을 한다.

: 아래의 이벤트들을 addEventListener의 첫번째 인자로 들어가는 이벤트 명과 발생하는 상광에 대한 설명이다.

: 위와 같이 다양한 이벤트들을 이용해서 현재 버퍼링 중일 때를 측정하고 재생 가능할때까지 기다렸다가 다시 재생하는 등 다양하게 UX를 발전시킬 수 있을 것이다.

* <video> 태그 응용의 예

: <video> 태그를 이용하여 가장 놀라운 효과를 소개시켜주자면 바로 아래 사이트의 데모일 것이다. 최신 버전의 브라우져(크롬 추천)로 들어가서 실행해보면 오로지 html과 자바스크립트로만 이런것이 가능하다는 것에서 상당히 놀랄 것이다.

http://craftymind.com/factory/html5video/CanvasVideo.html

: 계속 재생되는 비디오 위에 마우스 클릭을 하면 비디오가 파편이 되어 날라간다. 하지만 놀라운 것은 각 파편 속의 비디오의 재생이 멈추지 않고 계속 같이 재생된다는 점이다. 상당히 재미있는 예제이다. 같은 사이트에서 소개하는 또 다른 예는 <video>를 3d처럼 돌려가면서 보여주는 효과이다.

http://www.craftymind.com/factory/html5video/CanvasVideo3D.html

: 플러그인없이 오로지 브라우져로만 위와 같은 효과가 가능한 것이다. 플래시가 안되는 모바일에서도 물론 똑같이 돌아간다는 사실이 더욱 놀랍다. 물론 이러한 것들은 오로지 <video> 태그만을 가지고 구현할수는 없고 <canvas> 태그와 조합해서 이러한 효과들을 나타내는 것이다. 소스보기를 하면 구현한 방법이 다 있으니 보고서 <video> 태그의 응용 방법을 공부해보는 것도 좋을 것이다.

* <video> 태그의 기술적으로 더 발전된 응용

: 하지만 앞으로 <video> 태그가 활용될 것은 어쩌면 이러한 부분이 아니라 바로 WebRTC와 연동하여 활용되는 부분일지도 모른다. WebRTC는 getUserMedia라는 사용자 컴퓨터의 카메라와 마이크 등과 같은 디바이스에 접근을 하고 브라우져끼리 PeerConnection으로 이어주는 역할을 하며, 아직 완벽하게 표준화가 진행되지는 않은 상태이다. 하지만 한번쯤 살펴본다면 앞으로 브라우져 만으로 엄청 발전된 다양한 어플리케이션들이 나올 것이라고 예상할 수 있을 것이다.

: 아래 사이트는 webrtc를 소개하는 사이트로 나중에 HTML5 튜토리얼이 끝나면 강좌로 따로 공부해볼 생각이다. 궁금하면 들어가서 안에 있는 유투브 동영상을 한번 보는 것도 도움이 될 것이다.

http://www.html5rocks.com/en/tutorials/webrtc/basics/

: 아무런 추가 프로그램의 설치없이 브라우져만으로 영상통화하는 캡쳐 사진

: 여기서 카메라의 영상을 받아다가 <video> 태그로 스트리밍 방식으로 쏴주게 되는 것이다. 앞으로는 이런식으로 브라우져 기반 OTT 사업이 다양하게 나오게 되지 않을까 예상해본다.

* 다음편

2012/12/03 - [HTML5 튜토리얼] 새로운 form element 들

2016/05/04 - [HTML5 튜토리얼] Web storage (localStorage, sessionStorage)

2017/01/09 - [HTML5 튜토리얼] navigator.geolocation 위치 정보 수집 API

* Video와 Audio 태그 기본 끝.