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

HTML에서 버퍼링 없이 파일을 끝까지 재생할 수 있을 때 스크립트 실행하기 – oncanplaythrough 속성

HTML에서는 oncanplaythrough 속성을 사용하면 미디어 파일이 버퍼링으로 인해 일시 중지되지 않고 끝까지 재생할 수 있는 상태가 되었을 때 특정 스크립트를 실행할 수 있습니다.

이 이벤트는 브라우저가 미디어 데이터를 충분히 불러와서 중단 없이 전체를 재생할 것으로 판단하는 시점에 발생합니다. 따라서 로딩 완료 안내 메시지 표시, 재생 버튼 활성화 등 다양한 용도로 활용할 수 있으며, <video> 및 <audio> 요소에 적용됩니다.

예제

아래 코드를 실행하면 oncanplaythrough 속성의 동작을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <body>
      <video id = "myVideo" width = "400" height = "200" controls oncanplaythrough = "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>
         function display() {
            alert("Can be played without pausing for buffering.");
         }
      </script>
   </body>
</html>

코드 설명

  • oncanplaythrough = "display()": 비디오가 버퍼링 없이 끝까지 재생 가능한 상태가 되면 display() 함수가 자동으로 호출됩니다.
  • <source> 요소: 브라우저 호환성을 위해 OGG 형식과 MP4 형식 두 가지 소스를 제공합니다.
  • alert(): 이벤트가 발생했음을 사용자에게 알려주는 간단한 알림 창을 띄웁니다.

실제 프로젝트에서는 alert 대신 로딩 인디케이터 숨기기, 재생 컨트롤 활성화 등의 UI 처리를 수행하는 것이 좋습니다.