Audio/Video

Audio/Video 方法

addTextTrack() canPlayType() load() play() pause()

Audio/Video 属性

audioTracks autoplay buffered controller controls crossOrigin currentSrc currentTime defaultMuted defaultPlaybackRate duration ended error loop mediaGroup muted networkState paused playbackRate played readyState readyState seekable seeking src startDate textTracks videoTracks volume

Audio/Video 事件

onabort oncanplay oncanplaythrouth ondurationchange emptied onended onerror onloadeddata onloadedmetadata onloadstart onpause onplay onplaying onprogress onratechange onseeked onseeking onstalled onsuspend ontimeupdate onvolumechange onwaiting

JavaScript对象

基础内容

基础

HTML DOM

DOM Document DOM Elements DOM Attributes DOM Events

浏览器BOM

Window Navigator Screen History Location

html对象

a abbr address area article aside audio b base bdo blockquote body br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1~h6 head hr html i iframe img input button input checkbox input color input date input datetime input datetime-local input email input file input hidden input image input month input number input password input radio input range input reset input search input submit input text input time input url input week ins kbd keygen label legend li link map mark menu meta meter nav object ol optgroup option output p param pre progress q s samp script scetion select small source span strong style

onseeked事件;用户改变播放位置后触发的事件

onseeked事件为用户改变播放位置后触发的事件。即:用户操作滑动条到新的位置时触发的事件。

onseeked事件与onseeking事件是相对的。使用Audio/Video对象的 currentTime属性获取媒体的当前播放位置。

事件使用位置及书写方式
使用位置 书写方式
HTML <audio/video onseeked="myscript">
JavaScript object.onseeked=function(){myscript};
JavaScript中,使用addEventListener()方法 object.addEventListener("seeked",myscript);
注:IE8之前的浏览器不支持addEventListener()方法。
支持该事件的HTML元素:<audio><video>

使用例

使用方法1:html中

HTML文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>声频、视频 API</title>

</head>

<body>

<p>使用方法1:html中

<span id="mySpan1"></span></p>

<video id="myVideo1" controls onseeked="myFc1()"> <!--触发onseeked事件 时调用 myFc1()函数-->

<source src="sample.mp4" type="video/mp4">

<source src="sample.ogg" type="video/ogg">

你的浏览器不支持HTML5 video.

</video>

<script>

var vid = document.getElementById("myVideo1");//获得video元素的id值

function myFc1() {

document.getElementById("mySpan1").innerHTML = "用户移动了滑动条,触发了onseeked事件 ";

}

</script>

</body>

</html>

使用方法2:Javascript中

HTML文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>声频、视频 API</title>

</head>

<body>

<p>使用方法2:Javascript中

<span id="mySpan2"></span></p>

<video id="myVideo2" controls> <!--触发onseeked事件 时调用 myFc2()函数-->

<source src="sample.mp4" type="video/mp4">

<source src="sample.ogg" type="video/ogg">

你的浏览器不支持HTML5 video.

</video>

<script>

var vid = document.getElementById("myVideo2");//获得video元素的id值

vid.onseeked = function(){myFc2()};

function myFc2() {

document.getElementById("mySpan2").innerHTML = "用户移动了滑动条,触发了onseeked事件 ";

}

</script>

</body>

</html>

使用方法3:Javascript中使用addEventListener()方法调用;

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>声频、视频 API</title>

</head>

<body>

<p>使用方法3:Javascript中使用addEventListener()方法调用;

<span id="mySpan3"></span></p>

<video id="myVideo3" controls> <!--触发onseeked事件 时调用 myFc3()函数-->

<source src="sample.mp4" type="video/mp4">

<source src="sample.ogg" type="video/ogg">

你的浏览器不支持HTML5 video.

</video>

<script>

var vid = document.getElementById("myVideo3");//获得video元素的id值

vid.addEventListener("seeked", myFc3);

function myFc3() {

document.getElementById("mySpan3").innerHTML = "用户移动了滑动条,触发了onseeked事件 ";

}

</script>

</body>

</html>

不同浏览器的对应情况

事件
onseeked 9.0 yes yes yes yes

注:IE8及之前版本不支持 addEventListener()方法