html5视频常⽤API接⼝⼀、虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=”属性值”）格式，避免出现错误（下⾯加粗的属性为常⽤属性）
属性值功能描述
controls controls是否显⽰播放控件
autoplay autoplay设置是否打开浏览器后⾃动播放
width Pilex（像素）设置播放器的宽度
height Pilex（像素）设置播放器的⾼度
loop loop设置视频是否循环播放（即播放完后继续重新播
放）
preload preload设置是否等加载完再播放
src url设置要播放视频的url地址
poster imgurl设置播放器初始默认显⽰图⽚
autobuffer autobuffer设置为浏览器缓冲⽅式，不设置autoply才有效
演⽰：
<video controls="controls" width="500px" height="500px" loop autoplay poster="imgUrl">
<source src="⿊客之都.mp4" type="video/mp4"/>
<track src="a.vtt" label="中⽂" srclang="zh" kind="subtitles" default/>
</video>
⼆、.video标签API⽅法：Video标签也提供了⽐较⼈性化的API接⼝⽅法，供写JS时直接调⽤，⽅便简单
API事件说明
addTextTrack()向⾳频/视频添加新的⽂本轨道。
play video.play(); 播放视频
pause video.pause(); 暂停播放视频
load video.load(); 将全部属性回复默认值，视频恢复重
新开始状态
canPlayType var support = videoid.canPlayType('video/mp4');
判断浏览器是否⽀持当前类型的视频格式
返回值：
空字符串：不⽀持
Maybe：可能⽀持
Probably：完全⽀持
关于video标签的API接⼝在JS中⽤法如下：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <style>
5 video::cue{
6 background-color:transparent;
7 color:white;
8 font-size:20px;
9 line-height: 100px;
10 }
11 </style>
12 </head>
13 <body>
14
15 <video controls="controls" id="video1">
16 <source src="⿊客之都.Hackerville.S01E01.720P.mp4" type="video/mp4"/>
17 <track src="a.vtt" label="中⽂字幕" srclang="zh" kind="subtitles" default/>
18 </video>
19 <button onclick="isPlay(this)">播放</button>
20 <button onclick="replay()">重新播放</button>
21 <button onclick="isPlayType()">浏览器⽀持</button>
22
23 <script>
24var video1 = ElementById("video1"); //括号内为video标签的id
25//播放视频（点击播放按钮，后变成暂停）
26 function isPlay(obj1){
27if(video1.paused){ //paused属于视频api属性
28 obj1.innerHTML="暂停";
29 video1.play();
30 }else{
31 obj1.innerHTML="播放";
32 video1.pause();
33 }
34 }
35
36//重新从开头播放
37function replay(){
38 video1.load();
39 }
40
41//判断要播放的视频格式当前浏览器是否⽀持
42function isPlayType(){
43var support = video1.canPlayType("video/mp4");
44 console.log(support); //返回结果：空字符串、maybe（可能⽀持）、probably（⽀持）
45 }
46 </script>
47 </body>
48 </html>
三、video标签API属性： Video不仅提供了API接⼝，还提供了许多的API属性，⽅便在JS中做判断，如下：⼤部分属性通过boolean值判断
API属性事件说明
duration返回媒体的播放总时长，单位秒
loop是否循环播放
muted是否静⾳
paused是否暂停
currentTime当前播放时间（单位：秒）
volume⾳量值(0~1)
networkState返回当前⽹络状态
playbackRate播放的倍速(加速、减速播放)(-2~2)
src当前视频源的URL
ended返回当前播放是否结束标志
error返回当前播放的错误状态
initialTime返回初始播放的位置
mediaGroup当前⾳视频所属媒体组 (⽤来链接多个⾳视频标签) played当前播放部件已经播放的时间范围(TimeRanges对
象)
preload页⾯加载时是否同时加载⾳视频
readyState返回当前的准备状态
seekable返回当前可跳转部件的时间范围(TimeRanges对
象)
audioTracks返回可⽤的⾳轨列表（MultipleTrackList对象）
autoplay媒体加载后⾃动播放
buffered返回缓冲部件的时间范围(TimeRanges对象)
controller返回当前的媒体控制器（MediaController对象）controls显⽰播控控件
crossOrigin CORS设置
currentSrc返回当前媒体的URL
defaultMuted缺省是否静⾳
defaultPlaybackRate播控的缺省倍速
百度api接口seeking返回⽤户是否做了跳转操作
startOffsetTime返回当前的时间偏移(Date对象)
textTracks返回可⽤的⽂本轨迹(TextTrackList对象)
videoTracks返回可⽤的视频轨迹(VideoTrackList对象)
演⽰：
1 <script>
2function setting(){
3 video1.muted=true; //设置静⾳
4 video1.volume=0.2; //设置⾳量,1等于100%
5 video1.playbackRate=2; //2倍播放速度
6 ls=false; //不显⽰播控控件
7 }
8 </script>
四、⾳频/视频事件
事件描述
abort当⾳频/视频的加载已放弃时触发。
canplay当浏览器可以开始播放⾳频/视频时触发。
canplaythrough当浏览器可在不因缓冲⽽停顿的情况下进⾏播放时触发。durationchange当⾳频/视频的时长已更改时触发。
emptied当⽬前的播放列表为空时触发。
ended当⽬前的播放列表已结束时触发。
error当在⾳频/视频加载期间发⽣错误时触发。
loadeddata当浏览器已加载⾳频/视频的当前帧时触发。loadedmetadata当浏览器已加载⾳频/视频的元数据时触发。
loadstart当浏览器开始查⾳频/视频时触发。
pause当⾳频/视频已暂停时触发。
play当⾳频/视频已开始或不再暂停时触发。
playing当⾳频/视频在因缓冲⽽暂停或停⽌后已就绪时触发。progress当浏览器正在下载⾳频/视频时触发。
ratechange当⾳频/视频的播放速度已更改时触发。
seeked当⽤户已移动/跳跃到⾳频/视频中的新位置时触发。seeking当⽤户开始移动/跳跃到⾳频/视频中的新位置时触发。stalled当浏览器尝试获取媒体数据，但数据不可⽤时触发。suspend当浏览器刻意不获取媒体数据时触发。
timeupdate当⽬前的播放位置已更改时触发。
volumechange当⾳量已更改时触发。
waiting当视频由于需要缓冲下⼀帧⽽停⽌时触发。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论