HTML5에서는 onplaying 속성을 사용하여 오디오나 비디오가 실제로 재생되기 시작하는 시점에 스크립트를 실행할 수 있습니다. 이 속성을 활용하면 사용자에게 미디어가 재생 중임을 알리거나, 재생 시작과 연동되는 다양한 UI 효과를 구현할 수 있습니다.
onplaying 속성이란?
onplaying은 미디어가 일시정지 상태나 버퍼링 상태에서 벗어나 실제로 재생이 시작된 순간 발생하는 이벤트입니다. 참고로 onplay 이벤트는 재생 버튼을 누르는 순간 발생하지만, onplaying은 버퍼링이 끝나고 실제 화면에 재생이 시작될 때 발생한다는 차이가 있습니다.
예제 코드
아래 코드를 실행하면 비디오 재생이 시작될 때 스크립트가 실행되어 알림 창이 표시되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<video id = "myid" width = "350" height = "200" controls onplaying = "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("Video started playing!");
}
</script>
</body>
</html>코드 설명
- <video> 태그: onplaying = "display()" 속성을 통해 재생이 시작되면 display() 함수가 호출됩니다.
- <source> 태그: 브라우저 호환성을 위해 OGG와 MP4 형식의 비디오 소스를 두 가지 제공합니다.
- <script> 태그: 재생 시작 시 "Video started playing!"이라는 메시지를 담은 알림 창을 띄우는 함수를 정의합니다.
활용 팁
단순히 alert 창을 띄우는 것 외에도, onplaying 이벤트를 활용하면 재생 시작 시 자막 표시, 배경 음악 볼륨 조절, 애니메이션 효과 실행 등 다양한 인터랙션을 구현할 수 있습니다. 또한 JavaScript에서 addEventListener('playing', 함수) 방식으로도 동일한 기능을 구현할 수 있으므로, 상황에 맞게 선택하여 사용하시기 바랍니다.