Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML onvolumechange 속성 – 비디오·오디오 볼륨 변경 시 스크립트 자동 실행하기

HTML의 onvolumechange 속성은 웹 페이지에 삽입된 비디오(video) 또는 오디오(audio)의 볼륨이 변경될 때마다 지정된 스크립트를 자동으로 실행합니다. 여기서 볼륨 변경은 단순히 소리를 크게 하거나 작게 하는 것뿐만 아니라, 음소거(mute) 설정 및 해제와 같은 모든 볼륨 관련 변화까지 포함됩니다.

onvolumechange 속성이 트리거되는 경우

  • 볼륨을 높이거나 낮출 때
  • 음소거(mute)를 설정하거나 해제할 때

예제 코드

아래 코드를 실행하면 onvolumechange 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 비디오 플레이어에서 볼륨을 조절할 때마다 화면의 텍스트가 "Volume changed"로 바뀌도록 구현한 예제입니다.

<!DOCTYPE html>
<html>
   <body>
      <h2 id="test">Play</h2>
      <video id = "myid" width = "320" height = "176" controls onvolumechange = "myFunction()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the video element.
      </video>
      <script>
         function myFunction() {
         document.getElementById("test").innerHTML = "Volume changed";
         }
      </script>
   </body>
</html>

코드 설명

<video> 요소에 onvolumechange = "myFunction()"을 지정하면, 사용자가 컨트롤 바를 통해 볼륨을 조절하는 순간 myFunction() 함수가 호출됩니다. 이 함수는 id가 "test"인 <h2> 요소의 내용을 "Volume changed"라는 문구로 변경합니다. 이처럼 onvolumechange 속성을 활용하면 볼륨 상태 변화에 반응하는 인터랙티브한 UI를 손쉽게 만들 수 있습니다.