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中⽤法如下：
<!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 = ElementById("video1"); //括号内为video标签的id //播放视频（点击播放按钮，后变成暂停）
function isPlay(obj1){
if(video1.paused){ //paused属于视频api属性
obj1.innerHTML="暂停";
video1.play();
}else{
obj1.innerHTML="播放";
video1.pause();
}
}
//重新从开头播放
function replay(){
video1.load();
}
//判断要播放的视频格式当前浏览器是否⽀持html5开发示例
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倍播放速度
}
</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接⼝内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论