[javascript/jquery] javascript video custom volume control example / 자바스크립트 비디오 볼륨조절 예제

[javascript/jquery] javascript video custom volume control example / 자바스크립트 비디오 볼륨조절 예제

 

 

html 에서

 

video 태그를 이용하여

 

영상영역을 구현하고

 

custom control bar 를 

 

제작해서 사용하는 경우가 있습니다.

 

그중에서

 

소리 조절 옵션을 사용해야 하는 경우에는

 

아래와 같이 

 

input range 와 스크립트를 이용하시면 됩니다.

 

 

우선 아래처럼 video 태그가 있다고 가정하고,

<video id="video" width="400" autoplay>
    <source src="VIDEO_SRC" type="video/mp4">
</video>

 

위 video 의 소리를 조절하기위한

 

range 타입의 input 태그를 아래와 같이 선언합니다.

 

<input type="range" min="0" max="100" step="1" oninput="set_vol(this.value)" onchange="set_vol(this.value)"/>

 

그리고 볼륨값이 조절될때 마다

 

호출되는 set_vol 함수를

 

아래처럼 작성합니다.

 

function set_vol(val) {
    var player = document.getElementById('video');
    player.volume = val / 100;
}

 

그러면 이게 끝입니다 ㅎㅎ

 

볼륨 조절바를 디자인하려면

 

css 로 작업을 추가하시면 됩니다!

 

참고들 하세요!