View video tutorial

HTML onseeking Attribute

HTML

The HTML onseeking attribute is an event handler used to specify a script that will run when the user starts moving or skipping to a new position in media playback.

Definition and Usage


➔ This action of moving or skipping to a new position in the media is called "seeking".

➔ When the seeking operation begins and the media element's seeking property changes to true.

➔ This is the opposite of the onseeked event, which is fired when the seeking operation completes.

Syntax
//In HTML
<video controls onseeking="myFunction()" id="sample">
        <source src="myvideo.mp4" type="video/mp4">
</video>
//In javascript
document.getElementById("sample").onseeking=function() {myFunction();};
//OR
document.getElementById("sample").addEventListener("seeking", myFunction);
//OR 
document.getElementById("sample").addEventListener("seeking", (event) => {
    myFunction();
 });

Example
<html>
<head>
    <title>HTML onseeking attribute example</title>
</head>
<body>
    <h3>HTML onseeking attribute example</h3>
    <p>Set the src correctly and skip playback forward or backward by clicking on the progress bar to trigger the event.</p>
    <!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
    <video controls onseeking="myFunction(event)" id="sample">
        <source src="video-source.mp4" type="video/mp4">
        This browser does not support the video tag.
    </video>
    <script>
        //In javascript
        //document.getElementById("sample").onseeking=function() {myFunction();};
        //OR
        //document.getElementById("sample").addEventListener("seeking", myFunction);
        function myFunction(e) {            
            alert("The video playback Seeking operation began. Seeking: "+ e.target.currentTime+" seconds");
        }
    </script>
</body>
</html>

Applies to

This attribute can be used on the following element.

Attribute Element
onseeking <audio>, <video>