html5中video解码原理,详解Html5中video标签那些属性和方法

前言

最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛...后面会把自己写的播放器和踩过的一些坑也上传上来

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" 静音播放

应该还有一些...不过暂时没用到, 可以去查MDN文档

video对象的属性和方法

1.错误状态

$video.error; //null:正常

$video.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

2.网络状态