Module 7 - Audio and Video

1. Introduction

지금까지 역사적으로 웹 디자이너들은 오디오와 비디오 플레이를 온라인에서 재생시키는 기능들을 추가하기 위해 Adobe Flash나 다른 플러그인들을 써왔다. HTML5는 이것을 <audio>와 <video> 태그들을 통해 혁명적으로 바꿔놓았다. 이 태그들을 허용하는 브라우저들은 Audiovisual (시각음향)이나 Audio-only (음향만 있는) 미디어 파일들을 모두 재생 가능하게 만들어준다. 만약 브라우저가 그 태그들을 허용하지 않는다면 유저들에게 이 브라우저에서 지원할 수 없다라는 메세지와 함께 재생하지 못할 것 이다. 

 

우선 미디어 파일들을 지원하는 포맷들은 여러가지가 있는데 문제점은 서로 호환이 안되는 경우가 많다는 점이다. 특정 브라우저는 특정 포맷들만 지원하는 경우들이 있다. 그럼에도 불구하모 <audio>와 <video> 태그는 하나의 미디어 파일 안에 여러개의 포맷들을 규정하여 브라우저가 원하는 포맷들을 플레이 하게끔 도와준다. 

 

그리고 요즘 브라우저들이 거의 지원을 하는 미디어 파일 포맷들은 다음과 같아 아래의 확장자로 파일들을 세팅해주면 요즘 시대에는 왠만한 문제는 없을 것이다.

 

Audio	Video
.mp3	.mp4
.ogg	.ogv (or sometimes .ogg)
	.webm

 

What can we do with audio and video?

그렇다면 이 오디오와 비디오로 무엇을 할 수 있을까? 이는 jQuery로써 HTML5에 소속된 <audio>와 <video> 미디어 파일들을 접근하여 세팅을 따로 해줄 수 있다. 미디어 파일에 어떠한 효과가 일어나는지 어떻게 플레이 되는지 더욱 세부적이고 기능적인 부분들을 JavaScript기반 jQuery로 조절하여 더욱 다이나믹한 웹사이트를 구축하는 것이 가능해진다. 예를들어 비디오가 끝나고 나면 웹 페이지에서 파일이 사라진다든지 구글 맵이 영상안에서 특정 시간에 나타난다는지 그러한 기능들을 추가시켜 줄 수 있다. HTML5와 jQuery는 웹 디자이너들과 개발자들에게 있어 많은 양의 콘텐츠를 제작할 수 있는 기회들을 제공하고 이 기능들을 적극적으로 사용하는 것이 과제를 하는데 있어 포인트가 될 것 같다.

 

2. Adding Media to a Web Page

우선 HTML5으로 미디어 파일들을 웹 페이지에 삽입하는 과정부터 알아보고자 <video>와 <audio>태그를 어떠한 방법으로 사용해야 하는지 알아보겠다.

<video>

우선 비디오를 웹페이지에 삽입하기 위해서는 아래와 같은 코드를 작성해주어야 한다. 다만 코드를 작성하기 전 중요한 점은 항상 삽입하려는 비디오 파일들이 작성한 HTML 파일과 같은 폴더안에 있는 Videos라는 이름의 Sub-Folder (섭폴더)안에 있어야 한다는 것이다. 이를 해주지 않으면 코드상에서 파일들을 읽지 못하여 제대로된 결과를 내지 못할 것이다.

 

<video>
    <source src="videos/trailer.mp4">
    <source src="videos/trailer.ogg">
    <p>Your browser doesn't support HTML5. Please upgrade.</p>
</video>

 

이때 같은 비디오 파일에 <video>태그안에 두번 작성된 것을 알 수 있는데 이는 자세히 보면 확장자가 다름으로 두 개의 대표적인 포맷들을 코드상에 모두 집어넣어 왠만한 브라우저 상에서 작동되게끔 세팅해준 것이다. 만약 브라우저상에서 그럼에도 불구하고 파일을 지원해주는 포맷이 없거나 HTML5을 아예 지원하지 않는다면 아래의 <p> 태그안에 있는 문구가 대신 나타날 것이다.

 

그렇지만 이렇게 코드를 작성한다면 한가지 맘에 걸리는 것이 있을 것이다. 과연 페이지가 로드되고 나서 자동으로 플레이 되게끔 설정하려면 어떻게 해야 할까? 이는 <video> 태그안에 어떠한 명령을 덯붙여 실행시켜주게끔 만들 수 있다. 예를들어 autoplay라는 attribute를 <video> 태그 안에 집어넣어 페이지가 로딩되자 마자 자동으로 영상이 재생되게끔 만들 수 있고 control이라는 attribute를 또한 집어넣어 미디어 플레이이 컨트롤을 웹 페이지 상에서 display할 수 있게 한다.

 

<video controls autoplay>
    <source src="videos/trailer.mp4">
    <source src="videos/trailer.ogg">
    <p>Your browser doesn't support HTML5. Please upgrade.</p>
</video>

 

controls과 autoplay의 순서는 상관이 없으며 두 가지중 하나만 사용해도 원활하게 작동한다. 그리고 지금까지 사용한 다른 attribute와는 다르게 이 attribute들은 특정한 값을 요구하지 않는다.

 

<audio>

<audio>태그를 사용하게 될 때에도 거의 <video>와 똑같은 방식으로 코드를 작성하면 된다.

 

<audio>
    <source src="audio/song.mp3">
    <source src="audio/song.ogg">
    <p>Your browser doesn't support HTML5. Please upgrade.</p>
</audio>

 

그리고 또한 <video>와 동일하게 마찬가지로 controls과 autoplay같은 attribute들을 추가하여 더욱 기능을 추가시킬 수 있다.

 

2. Acting on Events

그렇다면 여기까지 알아보았을때 앞서 언급한 더욱 다이나믹한 웹사이트를 만들기 위해 event를 추가해야 하는데 이는 어떠한 방법을 사용해야 할까? 여기서 말하는 event란 재생할 데이터가 완전히 로드되었는지 아니면 미디어 파일이 재생을 완전히 끝냈는지와 같은 미디어 파일의 관한 정보의 알림행위이다. 그중 이번 스터디에서 배울 이벤트의 종류는 ended와 timeupdate이다.

 

ended

ended event는 미디어 파일이 재생을 완전히 끝냈는지 브라우저에게 알리는 역할을 한다. 이를 적용하기 위해 jQuery를 사용하여 재생이 끝난후 영상 파일을 사라지게끔 만들거나 "Thanks for watching"과 같은 텍스트를 띄울 수 있게끔 할 수 있다.

 

jQuery를 사용하여 특정 event를 적용하려 할때에는 브라우저에게 무슨 event가 일어날지 인식하게하고 특정한 action을 취하여라 이렇게 명령을 시키는 방식으로 시도할 수 있다.

 

$('video').on('ended', function() { // 만약 동영상이 끝났다면
    $('#thxText).show(); // 특정 텍스트를 남겨라
});

 

이 윗 코드에서 알 수 있는 사실은 우선적으로 ended라는 event가 생겨났을 때 (영상이 끝났을때) 브라우저에게 이 사실을 알리고 특정 HTML 요소를 디스플레이 하여라 라는 명령을 내리는 것을 알 수 있다.

 

timeupdate

timeupdate라는 event는 대채로 1초에 4번 아니면 매 250ms씩 선언되는 event이다. 우리는 jQuery가 timeupdate라는 event를 알아듣 미디어 파일의 현 playback time 재생 시간이 얼마인지 찾아보게 할 수 있다. 이는 ended event를 사용하는 것보다 조금 더 복잡하지만 미디어 재생 방식을 특정 웹페이지의 action과 같이 융합시키는데 아주 유용하게 작동된다. 예를들면 비디오가 40초를 넘어가면 어떤 텍스트가 영상안에서 자동적으로 뜨게끔 세팅해주거나 55초가 넘어가면 그 텍스트를 다시 숨기게끔 만들어 줄 수 있다. 이러한 action들을 시행시키기 위해 우리는 현재 미디어 파일의 시간이 언젠지 jQuery상에서 알게끔 만들어 주는 코드를 작성해야 한다.

 

우선 HTML으로 기본적으로 자동적으로 플레이되는 영상을 웹페이지에 첨부하려면 다음과 같이 작성해야 한다.

 

HTML

<video controls autoplay>
    <source src="videos/trailer.mp4">
    <source src="videos/trailer.ogg">
    <p>Your browser doesn't support HTML5. Please upgrade.</p>
</video>

 

jQuery

$('video').on('timeupdate', function() {
    var playTime = Math.round( $(this).get(0).currentTime );
    if(playTime == 5) {
        $('#txt1').show();
    }
    if(playTime == 10) {
        $('#txt1').hide();
    }
});

 

이 또한 뭐가 뭔말인지 모르겠다. 하나씩 분석하여 보자.

 

$('video').on('timeupdate', function() {

 

우선 맨 첫번째 이줄은 ended evnet와 동일하게 브라우저에게 timeupdate라는 event가 언제 시행될지 인식하라는 코드 라인이다. 이는 1초에 4번 발생함으로 ended event와는 다르게 영상 재생 한번에 여러번 반복되는 것을 알 수 있다.

 

    var playTime = Math.round( $(this).get(0).currentTime );

 

그 다음 playTime이라는 variable을 만들어 현제 영상 재생 시간을 playTime이라는 variable안에 저장시켜보았다.

그렇다면 Math.round()안에 있는

$(this).get(0).currentTime

은 무엇을 의미할까? 

우선 $(this)는 윗 코드라인에서 언급된 $('video')와 의미가 같다. 이로인해 알 수 있는 것은 한번 언급된 instance는 this로 통용 가능하다는 것이다. 그리고 나타나는 .get(0)은 조금 설명하기 복잡하므로 우선은 넘어가기로 하였다. 그다음에 있는 .currentTime은 <video>태그 안에 있는 요소의 속성으로써 현제 재생되는 위치의 시간을 나타낸다. jQuery는 이를 계산하여 4.17334578과 같은 특정한 수를 불러올 수 있으며 이는 Math.round()이라는 Method를 통해 반올림 시켜줄 수 있다. 그러므로 방금전 위의 수는 4가 된다. 

 

    if(playTime == 5) {
        $('#txt1').show();
    }
    if(playTime == 10) {
        $('#txt1').hide();
    }

 

그다음 IF statement 조건문이 나타나는데 간단히 말하자면 여기서 나타나는 if statement는 방금전 얻어낸 현재 재생위치의 시간이 특정한 값과 비교해주는 역할을 하고 있다. 첫번째 조건문은 지금 현재 재생 위치의 시간이 5라고 묻고 만약 그것이 맞다면 {}안에 있는 명령을 수행하게 된다. 여기서는 $('#txt1').show(); 라는 명령을 통해 txt1라는 ID안에 있는 요소를 영상안에 디스플레이 하게끔 할 수 있다. 이는 텍스트 뿐만이 아닌 image (이미지), play a sound (사운드 재생), open a pop-up window (팝업 윈도우 띄우기), load a Google Map (구글맵 로드)등 여러가지 기능들을 수행시켜 줄 수 있다.

 

방금전 언급한 기능들은 모두 timeupdate이라는 event가 발생할때 작동된다는 것을 숙지하는 것이 중요하다.

1. 그말인즉슨 영상이 재생되고 난후 250ms마다 jQuery는 현재 재생 위치의 시간을 계산한다음 반올림하여 playTime이라는 variable에 값을 저장한다.
2. 그다음 playTime이라는 값은 250ms마다 IF statement 조건문을 통해 특정 값과 비교되게 되고 만약 조건이 부합한다면 {}안에 있는 명령들을 즉시 수행하게 된다.

이번 스터디를 통해 어떠한 방식을 통하여 웹페이지에 원하는 비디오와 오디오 같은 미디어 파일을을 어떻게 삽입하는지와 jQuery event를 통해 자동적으로 어떠한 기능들이 작동하게끔 세팅해주는 방법을을 알 수 있었다. 이를 통해 웹사이트를 만들어 볼 때 더욱 User-friendly (유저 친화적인) 기능들을 제공하여 더욱 편리한 웹페이지들을 구성할 수 있다는 사실을 깨달았다.