當(dāng)搜尋操作完成，當(dāng)前播放位置已更改且布爾搜尋屬性更改為false時(shí)，將觸發(fā)搜尋事件。
當(dāng)用戶完成移動(dòng)/跳到視頻中的新位置后，請(qǐng)?zhí)嵝岩恍┪谋荆?/p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 音頻/視頻 onseeked 事件使用-菜鳥教程(cainiaoplus.com)</title>
</head>
<body>
<p>移動(dòng)視頻的播放位置</p>
<video id="myVideo" width="320" height="176" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</video>
<script>
var vid = document.getElementById("myVideo");
vid.onseeked = function()
{
alert("尋址操作完成!");
};
</script>
</body>
</html>測試看看 ?/?當(dāng)用戶完成移動(dòng)/跳到音頻/視頻中的新位置時(shí)，將發(fā)生搜索事件。
提示： seeked 事件的相反事件為seeking 事件。
提示： 使用 Audio/Video 對(duì)象的 currentTime 屬性來獲取視頻的播放位置。
IEFirefoxOperaChromeSafari
HTML 中：
<audio|video onseeked="myScript">嘗試一下
JavaScript 中：
audio|video.onseeked=function(){myScript};嘗試一下
JavaScript 中, 使用 addEventListener() 方法:
audio|video.addEventListener("seeked", myScript);嘗試一下
注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
技術(shù)細(xì)節(jié)| 支持的 HTML 標(biāo)簽: | <audio> 和 <video> |
|---|---|
| 支持的 JavaScript 對(duì)象: | Audio, Video |
該示例演示了 seeking 事件和 seeked 事件的區(qū)別:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 音頻/視頻 onseeked 事件使用-菜鳥教程(cainiaoplus.com)</title>
</head>
<body>
<p>該示例演示了 seeking 事件和 seeked 事件的區(qū)別:</p>
<p> seeking 事件在每次用戶開始移動(dòng)/跳躍視頻音頻（ audio/video）到新的位置時(shí)觸發(fā)。 </p>
<p> seeked 事件在用戶完成移動(dòng)/跳躍視頻音頻（ audio/video）到新的位置時(shí)觸發(fā)。</p>
<p>移動(dòng)視頻的播放位置。 <strong>提示：</strong> 嘗試安裝鼠標(biāo)按鈕并來回移動(dòng)視頻的播放文章。</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">
您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</video>
<p>seeking 觸發(fā): <span id="demo"></span> 次。</p>
<p>seeked 觸發(fā): <span id="demo2"></span> 次。</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>測試看看 ?/?在用戶完成移動(dòng)/跳躍到新的視頻位置時(shí)，使用 Video 對(duì)象的 currentTime 屬性來顯示當(dāng)前的播放位置:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 音頻/視頻 onseeked 事件使用-菜鳥教程(cainiaoplus.com)</title>
</head>
<body>
<p>該示例中，我們?yōu)?nbsp;video 元素添加了 "seeked" 事件。 currentTime 屬性返回當(dāng)前的播放位置。</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">
您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</video>
<p>尋址位置: <span id="demo"></span></p>
<script>
// 獲取 id="myVideo" 的 video
var vid = document.getElementById("myVideo");
// 為video 添加 seeked 事件, 在尋址操作完成后執(zhí)行函數(shù)
vid.addEventListener("seeked", myFunction);
function myFunction()
{
// 顯示在 id="demo" p 元素中 video 的當(dāng)前播放位置
document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>測試看看 ?/?在用戶完成移動(dòng)/跳躍到音頻新的播放位置時(shí)彈出提示信息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 音頻/視頻 onseeked 事件使用-菜鳥教程(cainiaoplus.com)</title>
</head>
<body>
<p>移動(dòng)音頻的播放位置</p>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
<script>
var aud = document.getElementById("myAudio");
aud.onseeked = function()
{
alert("尋址操作完成!");
};
</script>
</body>
</html>測試看看 ?/?