IT 기술 따라잡기

지난 글에서 HTML5 Video 태그를 이용해 브라우저에서 동영상을 상영하는 것을 공부해 봤습니다.
그리고 CSS로 꾸미는 방법하고 내가 원하는 스킨 만드는 법하고요.
자바스크립트를 이용해서 play/pause 하는 법까지 진행했습니다.
여기까지 하면 브라우저를 통해서 동영상을 보고 멈추고 하는 기본적인 기능은 다 됐습니다.
이제 동영상이 진행됨에 따라 Progress Bar 가 그 진행상태를 나타내주고 또 마우스로 진행바를 클릭하면 그 위치로 동영상이 옮겨져서 플레이 하도록 하는 기능을 배우겠습니다.
 function playOrPause() {
    if(!myMovie.paused && !myMovie.ended){
        myMovie.pause();
        playButton.innerHTML='Play';
        window.clearInterval(updateBar);
    }else{
        myMovie.play();
        playButton.innerHTML='Pause';
        updateBar=setInterval(update,500);
    }
 }
지난 시간에 만든 playOrPause 함수인데요 if 안에 window.clearInterval(updateBar) 가 추가 됐고 else 문 안에 updateBar=setInterval(update,500) 이 들어 있습니다.
먼저 else문에 있는 내용을 보면요.
updateBar 변수에 setInterval을 해 줍니다. 그 내용은 0.5초마다 update 함수를 실행하라는 내용입니다.
그리고 if 문에서는 (만약에 동영상이 play 중이면) 이 0.5초마다 update 함수를 call 하는 것을 중지하도록 하고 있습니다.

그럼 이제 update()함수를 만들어 볼까요?
이 update 함수에서는 동영상이 플레이 중이면 그 진행상황을 progress bar에 표시해 줄 겁니다. 그리고 동영상이 끝나면 진행바가 다시 처음으로 세팅되도록 하고 Button 글씨를 play로 바꿔 줄 거구요. 그리고 동영상이 끝나면 더이상 진행바를 업데이트 할 필요가 없으니까 setInterval 한 것도 clear 시킬겁니다.

이것을 자바스크립트가 알아듣는 언어로 번역하면 아래와 같습니다.
 function update(){
    if(!myMovie.ended){
        var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
        progressBar.style.width=size+'px'
    }else{
        progressBar.style.width='0px'
        playButton.innerHTML='Play';
        window.clearInterval(updateBar);
    }
 }
if 문은 myMovie가 ended가 아니면.. 즉 플레이 중이면(pause 중이어도 해당 됩니다.) 실행하라는 겁니다.
그 내용은 지역변수(var) size에 myMovie 의 전체 길이 중 지금 현재 위치를 구해서 barSize(600) 에 맞게 그 비율 대로 표시 할 수 있는 숫자를 구합니다.
(동영상의 전체 시간-길이- 는 브라우저가 이미 가지고 있습니다.)
지난번에 css파일 안에서 progressBar 의 width를 1px로 해 놨는데요.(사실은 이걸 이제 0px)으로 해야 합니다. 이 길이를 size 만큼으로 변경 시킬 겁니다.
자바스크립트에서 css 내의 값을 바꾸는 방법은 변수.style을 사용하면 됩니다.
위에서와 같이 progressBar.style의 width= size로 하는 겁니다. 그리고 css에서는 px라는 단위를 사용해야 되기 때문에 +'px'을 해 줍니다.
이제 0.5초마다 이 update 함수가 불려지면서 progressBar의 길이를 점점 바꿀 겁니다.

이제 동영상이 진행되는것에 맞춰 progress bar 가 진행 되고 Pause를 누르면 동영상과 함께 진행바도 멈춤니다.
그런데 아직 노란선을 누르면 동영상이 그 위치로 가서 플레이 되고 진행바도 그 위치에서 이어서 진행되도록 하는 기능은 없습니다.
이것은 clickedBar라는 함수에서 구현 할 겁니다. 잊으셨는지 모르겠는데 doFirst() 함수에서 이미 bar.addEventListener('click',clickedBar,false); 를 선언해 뒀습니다.
bar(id가 defaultBar) 즉 노란선을 클릭하면 clickedBar 함수를 call 하는 리스너 입니다.
그러니 이젠 이 함수를 구현하기만하면 됩니다
이 함수에서는 마우스로 클릭된 지점을 구해서 그만큼 barSize를 정하고 동영상을 그 지점부터 시작하도록 해야 합니다.
 function clickedBar(e) {
    if(!myMovie.paused && !myMovie.ended){
        var mouseX = e.pageX-bar.offsetLeft;
        var newtime = mouseX*myMovie.duration/barSize;
        myMovie.currentTime = newtime;
        progressBar.style.width=mouseX+'px'
    }
 }
여기서 e 는 해당 이벤트 입니다. 리스너를 click에 걸었으니까 e 는 그 click에 대한 정보를 담고 있습니다.
클릭한 지점은 x,y 좌표로 표현할 수 있습니다.
e.pageX는 클릭한 지점의 X좌표 입니다.
그 다음 offSetLeft 는 객체의 위치 중 width와 관련된 property 입니다.
자세한 사항은 여기를 참조하세요.
이 x 값을 지역변수 mouseX에 담습니다.
다음 지역변수 newtime에 동영상 전체 길이에 비례한 barSize내의 값을 담습니다.
그리고 다음 줄에서는 동영상의 현재 위치를 newtime으로 바꾸고요.
마지막 줄에서는 progressBar의 길이를 mouseX 필셀로 업데이트 합니다.

이제 progressBar 에 대한 기능 구현까지 모두 완료 했습니다.
html과 css 파일은 지난 글에 업로드한 파일 그대로구요.
자바스크립트 파일만 업로드 할께요.

여러분은 html 파일 안에 있는 동영상 이름만 여러분이 가지고 있는 것으로 바꾸시면 됩니다.

HTML5 로 나만의 동영상 플레이어 스킨 만들기는 completed 됐구요.
다음엔 아마 HTML5 의 Canvas 에 대해 공부할 겁니다.

지난 글에서 나만의 동영상 플레이어 스킨을 만드릭 위해 처음에 HTML5로 틀을 잡고 CSS로 그 틀을 꾸몄습니다.
오늘 할 일은 버튼을 누르면 어떤 동작이 일어나는 것 같은 기능이나 동적인 효과를 주기 위해 자바스크립트를 만들겠습니다.

소스는 어제 사용했던 소스를 그대로 사용하시면 됩니다.

이제 doug01.js 파일을 만들겠습니다.
우선 아래 내용을 코딩해 넣으세요.
 function doFirst(){
    barSize=600;
    myMovie=document.getElementById('myMovie');
    playButton=document.getElementById('playButton');
    bar=document.getElementById('defaultBar');
    progressBar=document.getElementById('progressBar');
   
    playButton.addEventListener('click',playOrPause,false);
    bar.addEventListener('click',clickedBar,false);
 }

우선 함수를 하나 만듭니다. 이름은 마음대로 하면 되는데 여기서는 doFirst()로 했습니다.
이 함수 안에는 우리가 control 할 여러 요소들을 객체로 만드는 일 부터 합니다.
우선 barSize라는 변수를 만들었는데요. 이것은 동영상이 진행될 때 얼마나 진행됐는지를 알려줄 progress bar 입니다. 처음 값을 600으로 주었습니다.
이것은 600픽셀이라는 의미입니다.
자바스크립트에서는 px라는 것을 사용하지 않습니다.
웹 작업을 하다보면 HTML, CSS, Javascript 이렇게 최소한 세가지 language를 사용해야 하는데. 이 세 가지 언어 규칙이 같지 않아서 많이 헛갈릴 수 있습니다.
계속 경험을 쌓고 반복 하면서 익숙해 질 수 밖에 없습니다.
어쨌든 자바스크립트에서는 px를 사용하지 않습니다.

두번째 변수는 myMovie 입니다. 이것은 HTMl 내에서 id가 myMovie로 돼 있는 부분입니다. video 태그에 있었죠?
이 변수를 가지고 video 태그에서 사용할 수 있는 여러 속성들을 사용할 겁니다.
문법은 HTML 문서를 가르키는 document 를 사용하고 . 으로 연결한 다음 getElementById 라는 메소드를 사용합니다. id를 가지고 html 문서내에 id 가 Movie인 부분을 앞으로 사용하겠다는 의미입니다.

다음 변수는 playButton 입니다. 위에 설명한 내용과 동일합니다.
그리고 bar, 와 progressBar 도 변수로 받아 놨습니다. 이제 이 변수들을 사용해서 동적으로 control 할 수 있습니다.

그 다음엔 위 playButton 에 리스너를 달았는데요. 클릭을 할 경우 playOrPause 라는 함수(메소드)를 실행하라는 메소드 입니다.

마지막에 false는 아래 설명을 참조하세요.
Required. Boolean that specifies whether the event needs to be captured or not.

false		Register the event handler for the bubbling phase.
true		Register the event handler for the capturing phase.

여기서 click 이외에 리스너로 사용할 수 있는 이벤트 들이 아주 많습니다.
그 정보는 여기 에서 확인하세요.
그 다음엔 bar에도 똑 같이 클릭 리스너를 달았습니다. bar를 클릭할 경우 clickedBar라는 함수가 불려질 겁니다.
이 playOrPause와 clickedBar  함수는 우리가 만들어야 합니다.

이 함수들을 만들기 전에 우리가 만들어 놓은 doFirst() 함수를 어디선가 call 해야 이 함수가 실행 됩니다.
그리고 이 함수는 처음 브라우저가 켜질 때 불려져야 합니다.
그러니 일단 아래와 같이 하세요.
 window.addEventListener('load',doFirst,false);
이 의미는 어떤 객체에 리스너를 다는 것이 아니라 window 즉 화면이 뜰 때 리스너를 달겠다는 것이구요. 인수 중 첫번째 load 는 HTML이 화면에 로딩 될 때 실행하라는 것이고 실행할 함수는 doFirst 라는 것 입니다.

여기까지 하고 실행하면 아직 아무런 동작도 하지 않습니다.
왜냐하면 지금까지는 우리들이 사용할 객체들만 만들어 놨지 이 객체들에 대해서 어떻게 작동하라고 하는 명령은 하지 않았으니까요.
우선 playButton을 누르면 실행하라고 한 playOrPause 함수를 만들겠습니다.
우리가 할 일은
처음에 플레이 버튼을 누르면 동영상이 실행이 됩니다.
그리고 버튼의 Play라는 글이 Pause라는 글자로 바뀌고 플레이 되는 동안 progress Bar 가 동영상 상영됨에 따라 진행이 되도록 해야 합니다.
그런데 이 동작은 동영상이 stop 되 있을 때 진행될 시나리오이고 동영상이 플레이 되고 있을 때는 다르게 동작을 해야 합니다.
이 때는 버튼에 글자가 Pause로 돼 있을 겁니다. 이 버튼을 누르면 동영상을 멈추고 버튼의 글자를 Pause로 바꿔야 합니다.

 function playOrPause() {
    if(!myMovie.paused && !myMovie.ended){
        myMovie.pause();
        playButton.innerHTML='Play';
    }else{
        myMovie.play();
        playButton.innerHTML='Pause';
    }
 }

myMovie.paused 는 id가 myMovie(Video 태그) 가 paused 됐다는 것을 말하고 myMovie.ended 는 동영상이 끝났다는 것을 말합니다. 그리고  그 앞에 !는 not이라는 의미 입니다.
그러니까 if 안에 있는 코드는 동영상이 paused 상태가 아니고 또 동영상이 ended 상태가 아니면.. 즉 동영상이 play 되고 있으면 이런 동작을 하라는 의미입니다.
if문 안을 보면 처음에 myMovie.play()가 나옵니다. 이것은 동영상을 플레이하라는 겁니다.
여기서 paused,ended,play() 등은 브라우저에 이미 들어가 있는 기능들 입니다. 그러므로 개발자가 따로 이런 함수를 만들 필요는 없습니다.
그 다음엔 playButton이라는 변수의 html을 바꾸라는 것입니다. 즉 text를 Play로 바꾸게 됩니다.
그 다음 else는 그렇지 않으면 이라는 뜻입니다. 그러니까 이에 if 문이 동영상이 재생되고 있으면 이라는 뜻이니까 else는 동영상이 재생되고 있지 않으면 이라는 의미입니다.
그러면 myMovie를 재생하고 playButton 의 텍스트를 Pause 입니다.

여기까지 하셨으면 저장하고 브라우저를 다시 재실행 해 보세요.

이제 Play 버튼을 누르면 동영상이 재생이 되면서 버튼에 Pause라는 글자가 들어갑니다.
그리고 이 Pause를 누르면 동영상이 멈추고 버튼 글자는 Play로 되구요.

이제 동영상이 진행 되면서 progress bar 가 점점 진행되고 또 진행바 중간을 마우스로 클릭하면 동영상이 그 위치로 옮겨지고 하는 부분을 구현하면 됩니다.

오늘은 여기까지 다루고 progress bar 관련해서는 다음 글에서 배우겠습니다.

지난 시간에는 HTML5 의 video Tag를 이용해서 브라우저에서 동영상을 보여주는 법에 대해 공부했습니다.
비디오 태그에 controls 라는 속성만 주면 기본적으로 제공하는 기능을 이용할 수 있었습니다. (재생,진행 바, 볼륨조절 등)
이번 시간엔 이런 디폴트 말고 나만의 비디오 스킨 만들기를 배워보도록 하겠습니다.
그러면서 HTML5와 CSS3 그리고 자바스크립트를 모두 사용해서 웹 화면을 꾸며 보겠습니다.

우선 아래와 같이 HTML 파일을 만드세요.
 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="main07.css">
    <script src="dougy01.js"></script>
</head>
<body style="background-color:#8EE5EE;">
    <section id="skin">
         <video id="myMovie" width="640" height="360" >
            <source src="song.mp4">   
         </video>
        <nav>
            <div id="buttons">
                <button type="button" id="playButton"> Play </button>
            </div>
            <div id="defaultBar">
                <div id="progressBar"> </div>
            </div>
            <div style="clear:both"></div>           
        </nav>
    </section>
</body>
</html>
우선 HTML에서는 기본적인 틀을 잡았습니다.
우선 css는 main07.css를 사용할 것이고 자바스크립트는 dougy01.js 를 사용할 겁니다.
Body 안에 skin 이라는 section으로 감쌌습니다. 이 부분이 비디오 스킨이 될 거기 때문에 ID를 skin이라고 주었습니다.
그 다음에 video 태그를 써서 비디오를 불러 올 것입니다.
이 부분도 id를 주었구요. 너비와 높이를 주었습니다. (참고로 이 너비와 높이는 유튜브 디폴트 사이즈입니다.)
지난 시간에 배운거랑 조금 다른 부분이 있습니다.
지난 시간에는 video tag 안에 모든 속성을 넣었는데요. 위 코드처럼 비디오 태그 사이에 속성을 넣을 수도 있습니다.
이 파일에서는 두번째 방법을 source를 지정했습니다. (동영상 파일은 각자 가지고 있는 것을 사용하세요.)

이제 스킨을 만드려면 우선 기본 기능인 플레이버튼하고 progress bar 이런걸 만들어야 겠죠?

이런건 <nav></nav> 태그 안에 집어 넣겠습니다.
<NAV>태그는 네비게이션을 위한 부분을 표시하기 위한 태그 입니다. HTML5는 기본적으로 외부 장치나 앱에서 잘 활용되기 위한 목적이 강함니다. 때문에 이 부분이 메뉴이고 이동을 위해서 정의 되었다는 것을 알려주는 것이 필요 합니다.

보시면 아시겠지만 nav 안에는 play button, progress Bar 등을 만들 수 있도록 틀을 잡았습니다.
맨 마지막 div 안에 있는 clear:both 는 뭘까요?
이건 css를 하면서 알아 보도록 하겠습니다.

지금까지의 모습은 이렇습니다.
아직 동영상 상영은 안되구요. play 버튼도 동작을 하지는 않습니다.

이제 css를 만드세요.
body{
    text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
    display:block;
}
#skin{
    width:700px;
    margin:10px auto;
    padding:5px;
    background:red;
    border:4px solid black;
    border-radius:10px;
}
nav{
    margin:5px 0px;
}
#buttons{
    float:left;
    width:70px;
    height:22px;
}
화면을 보기전에 화면이 어떻게 나올지 예상을 해 볼까요?
일단 body는 text-align을 center로 줬습니다.
그 다음 부분은 header,section,footer 등등을 하나의 블럭 단위로 관리하겠다는 겁니다.
우리가 만든 html에 있는 것도 있고 없는 것도 있습니다. 나중에 나올겁니다.
그 다음엔 id가 skin 인 것을 꾸몄네요.
스킨의 너비는 비디오 너비보다 더 클테고 마진은 위쪽에 10픽셀 있을 겁니다.
안쪽으로는 5픽셀의 공간이 있을거고 배경색은 빨간색입니다.
경계선은 4픽셀로 두껍고 검정색입니다. 그리고 테두리는 살짝 라운딩 처리가 될 겁니다.

그 다음엔 nav 태그를 꾸미는데요.
간단하네요. 마진이 위로 5픽셀 아래로 0픽셀 있을 겁니다.

다음은 id가 buttons 인 부분을 꾸밉니다. 아까 만든 play 버튼이 되겠죠?
float로 정해 졌으니까 이 다음에 나올 objects 들은 상하가 아니라 좌우로 정렬 될 겁니다. 그리고 너비는 70픽셀이고 높이는 22픽셀 입니다.

그럼 실제 화면을 볼까요?

예상대로 나왔나요?

css 파일에 아래 내용을 추가해 보세요.
#defaultBar{
    position:relative;
    float:left;
    width:600px;
    height:16px;
    padding:4px;
    border:2px solid black;
    background:yellow;
}
#progressBar{
    position:absolute;
    width:1px;
    height:16px;
    background:blue;
}
id가 defaultBar 인것과 id가 progressBar 인 것을 꾸미고 있습니다.
여기에 position이 하나는 relative이고 하나는 absolute으로 지정됐습니다.
position은 객체의 위치를 화면에 설정하는 것으로 아래와 같은 속성들이 있습니다.

* Position
static : 기본값, 기본적으로 설정 되는 값입니다. (top / left 적용 되지 않습니다.)
absolute(절대적) : 브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에 있다면 그 곳을 기준으로 합니다.
relative(상대적) : 객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상대값을 정해 줍니다.
fixed : relative의 하위 범주에 속하며, 다른 점은 화면이 스크롤 되어도 움직이지 않습니다.

defaultBar는 float left로 설정 돼 있으니까 다음에 오는 객체는 오른쪽에 위치하게 됩니다. 그리고 너비와 높이, 안쪽 여백, 검은 테두리선, 노란 배경색이 지정 됐습니다.

id가 progressBar인 부분은 absolute 포지션이니까 parent 요소인 defaultBar를 기준으로 위치가 적용됩니다. 그리고 너비, 높이와 파란색 배경색이 지정됐네요.

지금까지의 화면은 이렇습니다.
progress bar가 살짝 1픽셀만 파란색으로 나왔는데요. 이건 원래 0픽셀로 지정해 놓고 나중에 자바스크립트에서 처리할 겁니다.

다음 글에서는 비디오 플레이어 스킨 만들기 중 자바스크립트 부분을 배우겠습니다.