html5视频常用API接口的实战示例
程序员文章站
2022-04-23 22:16:11
这篇文章主要介绍了html5视频常用API接口的实战示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧... 20-03-20...
一、虽然有的属性是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中用法如下：
<!doctype html>
<html>
<head>
<style>
video::cue{
background-color:transparent;
color:white;
font-size:20px;
line-height: 100px;
}
</style>
</head>
<body>
<video controls="controls" id="video1">
<source src="黑客之都.hackerville.s01e01.720p.mp4" type="video/mp4"/>
<track src="a.vtt" label="中文字幕" srclang="zh" kind="subtitles" default/>
</video>
<button onclick="isplay(this)">播放</button>
<button onclick="replay()">重新播放</button>
<button onclick="isplaytype()">浏览器支持</button>
<script>
var video1 = document.getelementbyid("video1"); //括号内为video标签的id
//播放视频（点击播放按钮，后变成暂停）
function isplay(obj1){
if(video1.paused){ //paused属于视频api属性
obj1.innerhtml="暂停";
video1.play();
}else{
obj1.innerhtml="播放";
video1.pause();
}
}
//重新从开头播放
function replay(){
video1.load();
}
//判断要播放的视频格式当前浏览器是否支持
function isplaytype(){
var support = video1.canplaytype("video/mp4");
console.log(support); //返回结果：空字符串、maybe（可能支持）、probably（支持）
}
</script>
</body>
</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 | 播控的缺省倍速 |
| seeking | 返回用户是否做了跳转操作 |
| startoffsettime | 返回当前的时间偏移(date对象) |
| texttracks | 返回可用的文本轨迹(texttracklist对象) |
| videotracks | 返回可用的视频轨迹(videotracklist对象) |
演示
<script>
function setting(){
video1.muted=true; //设置静音
video1.volume=0.2; //设置音量,1等于100%
video1.playbackrate=2; //2倍播放速度
video1.controls=false; //不显示播控控件
}
</script>
四、音频/视频事件
| 事件 | 描述 |
| abort | 当音频/视频的加载已放弃时触发。 |
| canplay | 当浏览器可以开始播放音频/视频时触发。 |
| canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
| durationchange | 当音频/视频的时长已更改时触发。 |
| emptied | 当目前的播放列表为空时触发。 |
| ended | 当目前的播放列表已结束时触发。 |
| error | 当在音频/视频加载期间发生错误时触发。 |
| loadeddata | 当浏览器已加载音频/视频的当前帧时触发。 |
| loadedmetadata | 当浏览器已加载音频/视频的元数据时触发。 |
| loadstart | 当浏览器开始查找音频/视频时触发。 |
| pause | 当音频/视频已暂停时触发。 |
| play | 当音频/视频已开始或不再暂停时触发。 |
| playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
| progress | 当浏览器正在下载音频/视频时触发。 |
| ratechange | 当音频/视频的播放速度已更改时触发。 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发。 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时触发。 |
| suspend | 当浏览器刻意不获取媒体数据时触发。 |
| timeupdate | 当目前的播放位置已更改时触发。 |
| volumechange | 当音量已更改时触发。 |
| waiting | 当视频由于需要缓冲下一帧而停止时触发。 |
到此这篇关于html5视频常用api接口的实战示例的文章就介绍到这了,更多相关html5视频api接口内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！