onseeking 속성으로 탐색 시작 이벤트 처리하기
HTML에서 동영상의 탐색(seeking)이 활성화되었음을 나타내고, 이 시점에 스크립트를 실행하려면 onseeking 속성을 사용합니다.
사용자가 동영상 재생 위치를 이동(앞으로 또는 뒤로 건너뛰기)하기 시작하면 seeking 속성이 true로 설정되며, 이때 onseeking 이벤트가 발생합니다. 이 이벤트에 함수를 연결하면 탐색이 시작되는 순간 원하는 동작을 수행할 수 있습니다.
예제
다음 코드를 실행하면 seeking 속성이 true로 설정되어 탐색이 활성화된 시점에 스크립트가 실행됩니다.
<!DOCTYPE html>
<html>
<body>
<video controls onseeking = "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("Seeking starts!");
}
</script>
</body>
</html>코드 설명
<video> 요소에 onseeking = "display()"를 지정하여, 사용자가 재생 위치를 조작해 탐색이 시작되는 순간 display() 함수가 호출되도록 합니다. display() 함수 내부의 alert()는 "Seeking starts!"라는 알림 창을 표시하여 탐색 이벤트가 정상적으로 감지되었음을 보여줍니다.
참고로, 탐색이 끝나면 seeking 속성은 다시 false로 돌아가며 이때는 onseeked 이벤트를 활용할 수 있습니다. 두 이벤트를 함께 사용하면 탐색 시작과 종료 시점을 모두 처리할 수 있습니다.