HTML5 Video标识的特性、方式和恶性事件汇总详细介

日期:2021-01-20 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

前段時间写了1个根据html5 video的视頻播发器,从最初的对其不上解,随后到可以写1个基础健全的自定播发器。在这个全过程中,对video标识的特性,方式,恶性事件有了个全面的了解。下面归类列出来1下。

<video>标识的特性

拷贝编码
编码以下:

src :视頻的特性
poster:视頻封面,沒有播发时显示信息的照片
preload:预载入
autoplay:全自动播发
loop:循环系统播发
controls:访问器自带的操纵条
width:视頻宽度
height:视頻高宽比

html 编码

拷贝编码
编码以下:

<video id="media" src="https://www.jb51.net/test.mp4" controls width="400px" heigt="400px"></video>
//audio和video都可以以根据JS获得目标,JS根据id获得video和audio的目标

获得video目标

拷贝编码
编码以下:

Media = document.getElementById("media");

Media方式和特性:

HTMLVideoElement和HTMLAudioElement 均承继自HTMLMediaElement


拷贝编码
编码以下:

Media.error; //null:一切正常
Media.error.code; //1.客户停止 2.互联网不正确 3.解码不正确 4.URL失效
<strong>//互联网情况</strong>
- Media.currentSrc; //回到当今資源的URL
- Media.src = value; //回到或设定当今資源的URL
- Media.canPlayType(type); //是不是能播发某种文件格式的資源
- Media.networkState; //0.此元素未原始化 1.一切正常但沒有应用互联网 2.正在免费下载数据信息 3.沒有寻找資源
- Media.load(); //再次载入src特定的資源
- Media.buffered; //回到已缓存地区,TimeRanges
- Media.preload; //none:不预载 metadata:预载資源信息内容 auto:</p> <p><strong>//提前准备情况</strong>
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是不是正在seeking</p> <p><strong>//回放情况</strong></p> <p>Media.currentTime = value; //当今播发的部位,取值可更改部位
Media.startTime; //1般为0,假如为流新闻媒体或不从0刚开始的資源,则不为0
Media.duration; //当今資源长度 流回到无尽
Media.paused; //是不是中止
Media.defaultPlaybackRate = value;//默认设置的回放速率,能够设定
Media.playbackRate = value;//当今播发速率,设定后立刻更改
Media.played; //回到早已播发的地区,TimeRanges,有关此目标见下文
Media.seekable; //回到能够seek的地区 TimeRanges
Media.ended; //是不是完毕
Media.autoPlay; //是不是全自动播发
Media.loop; //是不是循环系统播发
Media.play(); //播发
Media.pause(); //中止
<strong>//视頻操纵</strong></p> <p>Media.controls;//是不是有默认设置操纵条
Media.volume = value; //声音
Media.muted = value; //静音
TimeRanges(地区)目标
TimeRanges.length; //地区段数
TimeRanges.start(index) //第index段地区的刚开始部位
TimeRanges.end(index) //第index段地区的完毕部位
<strong>//有关恶性事件</strong></p> <p> var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}
eventTester("loadstart"); //顾客端刚开始恳求数据信息
eventTester("progress"); //顾客端正在恳求数据信息
eventTester("suspend"); //延迟时间免费下载
eventTester("abort"); //顾客端积极停止免费下载(并不是由于不正确引发)
eventTester("loadstart"); //顾客端刚开始恳求数据信息
eventTester("progress"); //顾客端正在恳求数据信息
eventTester("suspend"); //延迟时间免费下载
eventTester("abort"); //顾客端积极停止免费下载(并不是由于不正确引发),
eventTester("error"); //恳求数据信息时遇到不正确
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay刚开始播发时开启
eventTester("pause"); //pause()开启
eventTester("loadedmetadata"); //取得成功获得資源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等候数据信息,并不是不正确
eventTester("playing"); //刚开始回放
eventTester("canplay"); //能够播发,但半途将会由于载入而中止
eventTester("canplaythrough"); //能够播发,音乐所有载入结束
eventTester("seeking"); //找寻中
eventTester("seeked"); //找寻结束
eventTester("timeupdate"); //播发時间更改
eventTester("ended"); //播发完毕
eventTester("ratechange"); //播发速度更改
eventTester("durationchange"); //資源长度更改
eventTester("volumechange"); //声音更改