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

HTML oncanplay 속성 – 미디어가 재생 준비를 마쳤을 때 스크립트 실행하기

미디어 파일이 재생을 시작할 수 있는 상태(버퍼링이 충분히 이루어진 상태)가 되었을 때 특정 스크립트를 실행하고 싶다면, HTML의 oncanplay 속성을 사용하면 됩니다.

oncanplay 속성이 지원되는 요소

oncanplay 속성은 다음 요소에서 사용할 수 있습니다.

  • <audio> – 오디오 콘텐츠
  • <embed> – 외부 콘텐츠 삽입
  • <object> – 외부 리소스 포함
  • <video> – 비디오 콘텐츠

즉, 브라우저가 해당 미디어의 일정 부분을 버퍼링하여 끊김 없이 재생을 시작할 수 있게 되는 순간, oncanplay에 지정된 JavaScript 함수가 자동으로 호출됩니다.

사용 예제

아래 예제는 비디오 요소에 oncanplay 속성을 적용하여, 재생 준비가 완료되면 display() 함수가 실행되도록 구현한 코드입니다.

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" controls oncanplay = "display()">
         <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>
         alert("I am ready to begin.");
      </script>
   </body>
</html>

코드 설명

  • <video> 요소에 oncanplay = "display()"를 지정하여, 비디오가 재생 가능한 상태가 되는 순간 display() 함수가 호출됩니다.
  • <source> 태그를 두 개 사용해 OGG 형식과 MP4 형식을 모두 제공함으로써, 브라우저가 지원하는 형식을 자동으로 선택하도록 했습니다.
  • 예제에서는 간단히 alert()로 "재생 준비 완료" 메시지를 표시하지만, 실제 프로젝트에서는 재생 버튼 활성화, 로딩 인디케이터 숨기기 등 다양한 작업에 활용할 수 있습니다.

정리

oncanplay 속성은 미디어 재생과 관련된 사용자 경험을 개선하는 데 유용한 이벤트 핸들러입니다. 특히 동영상 스트리밍 서비스나 음악 플레이어를 개발할 때, 재생 준비 상태를 감지하여 UI를 적절히 전환하는 용도로 널리 활용됩니다.