HTML5 강좌 16강 - HTML5 태그 - 미디어 제어하기
이번 강좌에서는 미디어 파일을 자바스크립트를 통해 제어해 보도록 하겠습니다.
자바스크립트에 대해 생소한 분들이 있을수도 있겠네요.
자바스크립트는 웹 문서의 기능적인 부분이나 제어적인 부분을 처리하는 언어 정도로
간단히 인지하고 넘어가면 될 듯 합니다.
자바스크립트에 대한 강좌는 html5 강좌 이후에 진행하겠습니다.
먼저 기본적인 메소드를 보겠습니다.
*play() : 미디어 파일을 재생함
*pause() : 미디어 파일을 일시 정지함
위 내용대로 한 버튼에는 미디어 파일을 재생하는 버튼을 연동시키려 하고요
한 버튼에는 미디어파일을 일시정지 하는 버튼을 연동시켜 보겠습니다.
먼저 버튼을 만들고 onclick 속성을 이용하여 클릭했을 경우 발생하는 이벤트, 즉 메소드를 연결하겠습니다.
<button onclick="mediaPlay()">재생 하기</button>
<button onclick="mediaPause()">일시 정지</button>
그리고 자바스크립트 코드에서 각각 버튼의 메소드.. play(), pause() 의 실행을 요청받았을 때
응답할 동작을 작성해보죠.
function mediaPlay(){
alert("플레이버튼");
}
위 코드는 'mediaPlay()라는 메소드가 실행되면 응답으로 { } 안에 내용을 실행하겠다' 라는 의미입니다.
alert 이란 명령어는 경고메시지를 보여준다는 명령어고요.. 경고메시지는 '플레이버튼' 입니다.
정리하면 플레이버튼 클릭시 '플레이버트' 이라는 경고메시지를 띄우는 겁니다.
mediaPause() 메소드 역시 같은 방식으로 자바스크립트 함수를 하나 만들겠습니다.
function mediaPause(){
alert("포즈버튼");
}
간단히 테스트를 해봤습니다.
이제는 미디어 파일을 재생하는 기능을 자바스크립트 코드에 넣어보죠.
function mediaPlay(){
document.getElementById('player').play();
}
function mediaPause(){
document.getElementById('player').pause();
}
위 함수 mediaPlay()의 내용은 'player라는 아이디를 가진 문서의 객체를 플레이 하라' 라는 명령입니다.
반대로 mediaPause()의 내용은 'player라는 아이디를 가진 문서의 객체를 일시정지 하라' 라는 명령이죠.
이제 다른 기능도 추가로 넣어보겠습니다.
볼륨을 조절하는 기능을 넣어보죠.
<button onclick="mediaVolumeUp()">볼륨 +</button>
<button onclick="mediaVolumeDown()">볼륨 -</button>
위와같이 버튼을 생성하고요.
function mediaVolumeUp(){
document.getElementById('player').volume += 0.1
}
function mediaVolumeDown(){
document.getElementById('player').volume -= 0.1
}
위와같이 버튼 클릭시 실행할 함수도 만들었습니다.
아주 잘 작동하네요.
이번에는 재생속도를 조절하는 기능입니다.
<button onclick="increaseSpeed()">재생 속도 +</button>
<button onclick="decreaseSpeed()">재생 속도 -</button>
<button onclick="defaultSpeed()">기본 속도</button>
먼저 버튼을 만들었습니다.
그리고 자바스크립트 함수를 만들겠습니다.
function increaseSpeed(){
document.getElementById('player').playbackRate += 0.1;
}
function decreaseSpeed(){
document.getElementById('player').playbackRate -= 0.1;
}
function defaultSpeed(){
document.getElementById('player').playbackRate = 1;
}
하나 더 만들어볼까요?
미디어 파일의 크기를 조절하는 기능을 만들어보죠.
<button onclick="increaseSize()">화면크기 +</button>
<button onclick="decreaseSize()">화면크기 -</button>
<button onclick="defaultSize()">원래크기로</button>
이렇게 버튼을 생성하고요.
function increaseSize(){
document.getElementById('player').width += 100;
document.getElementById('player').height += 100;
}
function decreaseSize(){
document.getElementById('player').width -= 100;
document.getElementById('player').height -= 100;
}
function defaultSize(){
document.getElementById('player').width = 400;
document.getElementById('player').height = 300;
}
자바스크립트 함수를 추가합니다.
(예제는 첨부파일에서 받을 수 있습니다.)
