onseeked 속성은 사용자가 오디오 또는 비디오의 재생 위치를 건너뛰거나 새로운 지점으로 이동(탐색)하는 작업을 마쳤을 때, 지정된 스크립트를 실행하도록 하는 HTML 이벤트 속성입니다.
이 속성은 주로 <audio> 및 <video> 요소와 함께 사용되며, 탐색(seek) 동작이 완료된 순간에 발생하는 'seeked' 이벤트에 반응합니다. 예를 들어, 현재 재생 위치를 화면에 표시하거나 특정 구간 도달 시 추가 동작을 수행하는 등의 기능을 구현할 수 있습니다.
onseeked 속성 예제
아래 코드를 실행하면 onseeked 속성의 실제 동작을 확인할 수 있습니다. 비디오에서 재생 위치를 임의로 이동하면, 이동이 완료된 후 현재 재생 시간이 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<h2 id = "test">Play</h2>
<video id = "myid" width = "320" height = "176" controls onseeked = "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 = "Current position: " +
document.getElementById("myid").currentTime;
}
</script>
</body>
</html>
코드 설명
- <video> 요소에 onseeked = "myFunction()"을 지정하여, 사용자가 재생 막대를 드래그해 위치를 변경하면 myFunction() 함수가 자동으로 호출됩니다.
- myFunction() 내부에서는 currentTime 속성을 통해 현재 재생 위치(초 단위)를 가져온 뒤, id가 'test'인 요소의 텍스트로 출력합니다.
- 두 개의 <source> 태그를 사용해 브라우저별로 지원되는 형식(Ogg, MP4)을 순차적으로 제공하여 호환성을 높였습니다.
참고 사항
onseeked는 탐색이 완료된 후에 실행되는 반면, 탐색이 시작될 때 실행되는 onseeking 속성도 있습니다. 두 속성을 함께 활용하면 탐색 시작과 종료 시점을 모두 제어할 수 있어 더욱 정교한 미디어 플레이어 UI를 구현할 수 있습니다.