HTML Reference Manual

Comprehensive List of HTML Tags

HTML Audio/Video DOM seeked event

The search event is triggered when the search operation is completed, the current playback position has changed, and the boolean search property is changed to false.

HTML Audio/Video DOM Reference Manual

Online Example

When the user completes the movement/After jumping to a new position in the video, prompt some text:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio</title>/Video onseeked event usage-Basic Tutorial(oldtoolbag.com)</title>/title>
</head>
<body>
<p>Move the video playback position</p>
<video id="myVideo" width="320" height="176" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　Your browser does not support HTML5　video tag.
</video>
<script>
var vid = document.getElementById("myVideo");
vid.onseeked　=　function()　
{
　　　　alert("Addressing operation completed!");
};
</script>　
</body>
</html>

Test to see ‹/›

Definition and usage

When the user completes the movement/Jump to audio/search event occurs when the user reaches a new position in the video.

Tip: 　The opposite event of seeked event isseeking event.

Tip: Use Audio/The Video object's currentTime property to get the video playback position.

Browser compatibility

IEFirefoxOperaChromeSafari

Syntax

In HTML:

<audio|video onseeked="myScript">Try it out

In JavaScript:

audio|video.onseeked=function(){myScript};Try it out

In JavaScript, use the addEventListener() method:

audio|video.addEventListener("seeked", myScript);Try it out

Note: Internet Explorer 8 and earlier IE versions do not support addEventListener() Methods.

Technical details

Supported HTML tags:	<audio> and <video>
Supported JavaScript objects:	Audio, Video

Online Example

This example demonstrates the seeking event and Difference of seeked event:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio</title>/Video onseeked event usage-Basic Tutorial(oldtoolbag.com)</title>/title>
</head>
<body>
<p>This example demonstrates the difference between  seeking  event and  seeked  event:</p>
<p>  seeking  event is triggered each time the user starts to move/Jump to the video audio (  audio/video) triggers when it reaches a new position.</p>
<p>  seeked  event is triggered when the user completes the movement/Jump to the video audio (  audio/video) triggers when it reaches a new position.</p>
<p>Move the video playback position.  <strong>Tip:</strong> Attempt to install the mouse button and move the video playback content back and forth.</p>
<video onseeking="myFunction()" onseeked="mySecondFunction()" width="320" height="176" controls>
　　<source src="mov_bbb.mp4" type="video/mp4">
　　<source src="mov_bbb.ogg" type="video/ogg">
　　Your browser does not support HTML5　video tag.
</video>
<p>seeking trigger: <span id="demo"></span> times.</p>
<p>seeked trigger: <span id="demo2></span> times.</p>
<script>
x = 0;
function myFunction()　
{
　　　　document.getElementById("demo").innerHTML = x　+=　1;
}
y = 0;
function mySecondFunction()　
{
　　　　document.getElementById("demo2").innerHTML = y　+=　1;
}
</script>
</body>
</html>

Test to see ‹/›

Online Example

After the user completes the move/When jumping to a new video position, use the "currentTime" property of the Video object to display the current playback position:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio</title>/Video onseeked event usage-Basic Tutorial(oldtoolbag.com)</title>/title>
</head>
<body>
<p>In this example, we added the "seeked" event to the video element. The "currentTime" property returns the current playback position.</p>
<p>Move to a new position in the video.</p>
<video id="myVideo" width="320" height="176" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　Your browser does not support HTML5　video tag.
</video>
<p>Addressing position: <span id="demo"></span></p>
<script>
//　Get the video with id="myVideo"
var vid = document.getElementById("myVideo");
//　Add a "seeked" event to the video, to execute the function after the addressing operation is completed
vid.addEventListener("seeked", myFunction);
function myFunction()　
{
　　　　//　　Display the current playback position of the video in the element with id="demo"
　　　　document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>

Test to see ‹/›

Online Example

After the user completes the move/A prompt message pops up when jumping to a new playback position of the audio:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio</title>/Video onseeked event usage-Basic Tutorial(oldtoolbag.com)</title>/title>
</head>
<body>
<p>Move the playback position of the audio</p>
<audio id="myAudio" controls>
　　<source src="horse.ogg" type="audio/ogg">
　　<source src="horse.mp3" type="audio/mpeg">
　　Your browser does not support the audio element.
</audio>
<script>
var aud = document.getElementById("myAudio");
aud.onseeked = function()　
{
　　　　alert("Addressing operation completed!");
};
</script>　
</body>
</html>

Test to see ‹/›

HTML Audio/Video DOM Reference Manual

HTML: <template> tag