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

onpause 속성 활용법 – 미디어가 일시 정지될 때 스크립트 자동 실행하기

HTML onpause 속성이란?

onpause 속성은 오디오나 비디오 같은 미디어가 일시 정지되는 순간 지정된 스크립트를 실행하는 HTML 이벤트 속성입니다. 사용자가 재생 컨트롤의 일시 정지 버튼을 클릭했을 때뿐만 아니라, JavaScript에서 pause() 메서드를 호출해 프로그래밍 방식으로 미디어를 정지시켰을 때에도 이벤트가 발생합니다.

onpause 속성 기본 문법

<video> 또는 <audio> 요소에 다음과 같이 속성을 추가하면 됩니다.

<video controls onpause = "myFunction()">
  <source src = "video.mp4" type = "video/mp4" />
</video>

예제: 비디오 일시 정지 시 텍스트 변경하기

아래 코드는 비디오가 일시 정지되면 화면의 제목 텍스트가 "Media paused!"(미디어가 일시 정지되었습니다!)로 바뀌는 간단한 예제입니다.

<!DOCTYPE html>
<html>
   <body>
      <h2 id = "test">Play</h2>
      <video id = "myid" width = "320" height = "176" controls onpause = "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 = "Media paused!";
         }
      </script>
   </body>
</html>

코드 동작 원리

  • 비디오 요소: <video> 태그에 onpause = "myFunction()"을 지정해 일시 정지 이벤트와 함수를 연결합니다.
  • 다중 소스 지원: <source> 태그를 여러 개 사용해 브라우저별로 지원하는 형식(Ogg, MP4)을 순차적으로 제공합니다.
  • 이벤트 처리: 비디오가 일시 정지되면 myFunction()이 호출되어 id가 "test"인 <h2> 요소의 내용이 "Media paused!"로 변경됩니다.
  • 대체 텍스트: 비디오 요소를 지원하지 않는 구형 브라우저를 위해 안내 문구를 함께 작성했습니다.

이처럼 onpause 속성을 활용하면 미디어 일시 정지 시점에 맞춰 광고 표시, 학습 진도 저장, UI 상태 업데이트 등 다양한 동작을 손쉽게 구현할 수 있습니다.