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

seekable属性;返回代表视频、声频可移动播放部分的TimeRanges对象

使用seekable属性返回代表视频、声频可移动播放部分的TimeRanges对象,TimeRanges对象 代表了用户操作滑条,进行选择播放的范围,为一时间段。

在TimeTanges事件中,针对视频、声频的播放部分,有表示开始点的start属性和结束点的end属性, 与currentTime相同, 容纳了以秒计算的实数值。start与end是以矩阵的形式存在的。

视频、声频完成缓冲前,用户可以操作滑条到任何位置。

该属性为只读属性。

属性值及其说明
说明
TimeRanges事件 代表视频、声频的可移动部分。TimeRanges事件属性:
  • length:获取声频、视频的可移动播放长度。
  • start(index):获取可移动部分的开始点
  • end(index):获取可移动部分的结束点
注:矩阵的起始序号为0
JavaScript 语法:audio/video.seekable

使用例


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<button onclick="myFunction()" type="button">获取视频长度</button><br>

<video id="video1" width="480" height="270" controls="controls">

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

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

你的浏览器不支持HTML5 video.

</video>

<script>

var vid = document.getElementById("video1");

function myFunction() {

alert("开始: " + vid.seekable.start(0) + " 结束: " + vid.seekable.end(0));

}

</script>

</body>

</html>

不同浏览器的对应情况

属性
seekable 9.0 yes 8.0 yes yes