详解Html5中video标识那些特性和方式

2020-10-13 12:15 jianzhan

序言

近期在写1个自定播发器, 写以前大家毫无疑问要把播发器的特性和方式所有过1遍,知彼知心,方能百战百胜嘛...后边会把自身写的播发器和踩过的1些坑也提交上来

video标识行内特性

  • src:视頻的URL
  • poster:视頻封面,沒有播发时显示信息的照片
  • preload:预载入
  • autoplay:全自动播发
  • loop:循环系统播发
  • controls:访问器自带的操纵条
  • width:视頻宽度
  • height:视頻高宽比
  • webkit-playsinline="true" IOS下避免全屏播发
  • playsinline="true" 同上
  • x-webkit-airplay="true" 适用ios的AirPlay作用
  • x5-video-player-type="h5" 开启同层H5播发器
  • x5-video-player-fullscreen="true" 全屏设定
  • x5-video-orientation="portraint" 竖屏
  • style="object-fit:fill" 封面铺满
  • muted="true" 静音播发

应当也有1些...但是临时没用到, 能够去查MDN文本文档

video目标的特性和方式

1.不正确情况

$video.error; //null:一切正常  
   $video.error.code; //1.客户停止 2.互联网不正确 3.解码不正确 4.URL失效

2.互联网情况特性(一些较为常见)

$video.currentSrc; //回到当今資源的URL  
   $video.src = value; //回到或设定当今資源的URL  
   $video.canPlayType(type); //是不是能播发某种文件格式的資源  
   $video.networkState; //0.此元素未原始化  1.一切正常但沒有应用互联网  2.正在免费下载数据信息  3.沒有寻找資源  
   $video.load(); //再次载入src特定的資源  
   $video.buffered; //回到已缓存地区,$video.buffered.end(0)拿到最终1刻的数据信息
   $video.preload; //none:不预载 metadata:预载資源信息内容 auto:

3.提前准备情况

$video.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  
   $video.seeking; //是不是正在seeking

4.播发情况( 常见 )

$video.currentTime = value; //当今播发的部位,取值可更改部位   
   $video.duration; //当今資源长度 流回到无尽  
   $video.paused; //是不是中止  
   $video.defaultPlaybackRate = value;//默认设置的回放速率,能够设定  
   $video.playbackRate = value;//当今播发速率,设定后立刻更改  
   $video.seekable; //回到能够seek的地区 
   $video.ended; //是不是完毕  
   $video.autoPlay;  //是不是全自动播发  
   $video.loop;  //是不是循环系统播发  
   $video.play();    //播发  
   $video.pause();   //中止

5.操纵

$video.controls;//是不是有默认设置操纵条  
   $video.volume = value; //声音  
   $video.muted = value; //静音
video恶性事件方式(常见的加*了)
loadstart   //顾客端刚开始恳求数据信息  
*progress    //顾客端正在恳求数据信息  
suspend     //延迟时间免费下载  
abort       //顾客端积极停止免费下载(并不是由于不正确引发),  
*error      //恳求数据信息时遇到不正确  
stalled     //网速失速  
*play        //play()和autoplay刚开始播发时开启  
*pause      //pause()开启  
loadedmetadata  //取得成功获得資源长度  
*waiting    //等候数据信息,并不是不正确  
*playing     //刚开始回放  
canplay     //能够播发,但半途将会由于载入而中止  
*canplaythrough //能够播发  
seeking     //資源找寻中  
seeked      //資源找寻结束  
*timeupdate  //播发時间更改  
*ended       //播发完毕  
ratechange  //播发速度更改  
durationchange  //資源长度更改  
*volumechange    //声音更改

基础上自定播发器编码全是根据这个api和特性来写的, 之后便捷自身查阅....

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。