html5中有哪些视频API接口-创新互联

今天就跟大家聊聊有关html5中有哪些视频API接口,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

郫都ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

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

属性功能描述
controlscontrols是否显示播放控件
autoplayautoplay设置是否打开浏览器后自动播放
widthPilex(像素)设置播放器的宽度
heightPilex(像素)设置播放器的高度
looploop设置视频是否循环播放(即播放完后继续重新播放)
preloadpreload设置是否等加载完再播放
srcurl设置要播放视频的url地址
posterimgurl设置播放器初始默认显示图片
autobufferautobuffer设置为浏览器缓冲方式,不设置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()向音频/视频添加新的文本轨道。
playvideo.play();    播放视频
pausevideo.pause();  暂停播放视频
loadvideo.load();   将全部属性回复默认值,视频恢复重新开始状态
canPlayTypevar 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显示播控控件
crossOriginCORS设置
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接口-创新互联
转载源于:https://www.cdcxhl.com/article30/dopdso.html

成都网站建设公司_创新互联,为您提供定制开发网站改版搜索引擎优化网页设计公司App开发移动网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

商城网站建设