您现在的位置是:网站首页> 编程资料编程资料

html5视频常用API接口的实战示例HTML5拖拽API经典实例详解HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码你不知道的5个HTML5新功能HTML5拖放API实现自动生成相框功能

2023-10-11 390人已围观

简介 这篇文章主要介绍了html5视频常用API接口的实战示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=”属性值”)格式,避免出现错误 (下面加粗的属性为常用属性)

属性功能描述
controlscontrols是否显示播放控件
autoplayautoplay设置是否打开浏览器后自动播放
widthPilex(像素)设置播放器的宽度
heightPilex(像素)设置播放器的高度
looploop设置视频是否循环播放(即播放完后继续重新播放)
preloadpreload设置是否等加载完再播放
srcurl设置要播放视频的url地址
posterimgurl设置播放器初始默认显示图片
autobufferautobuffer设置为浏览器缓冲方式,不设置autoply才有效

演示:

二、.video标签API方法:Video标签也提供了比较人性化的API接口方法,供写JS时直接调用,方便简单

API事件说明
addTextTrack()向音频/视频添加新的文本轨道。
playvideo.play();    播放视频
pausevideo.pause();  暂停播放视频
loadvideo.load();   将全部属性回复默认值,视频恢复重新开始状态
canPlayTypevar support = videoid.canPlayType('video/mp4');   判断浏览器是否支持当前类型的视频格式 返回值: 空字符串:不支持 Maybe:可能支持 Probably:完全支持

关于video标签的API接口在JS中用法如下:

三、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显示播控控件
crossOriginCORS设置
currentSrc返回当前媒体的URL
defaultMuted缺省是否静音
defaultPlaybackRate播控的缺省倍速
seeking返回用户是否做了跳转操作
startOffsetTime返回当前的时间偏移(Date对象)
textTracks返回可用的文本轨迹(TextTrackList对象)
videoTracks返回可用的视频轨迹(VideoTrackList对象)

演示

四、音频/视频事件

事件描述
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接口内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

-六神源码网