https://blog.csdn.net/zhuchunyan_aijia/article/details/52277846文章来源地址https://www.toymoban.com/news/detail-515871.html
属性介绍
| 属性 | 说明 |
|---|---|
| controls | 显示标准的 HTML5 视频/音频播放器控制条、控制按钮。 |
| autoplay | 让文件自动播放。 |
| loop | 让文件循环播放。 |
| preload | 属性是用来缓存大体积文件的。它有三个可选值：“none” 不缓存、“auto” 缓存、“metadata” 只缓存文件元信息 |
| poster | 视频封面 |
| webkit-playsinlin=“true” | 这个属性在 ios 10中设置有用，其他的目前还不起作用，让视频在小窗内播放，也就是不是全屏播放 |
| playsinline=“true” | IOS微信浏览器支持小窗内播放 |
| x5-video-player-type=“h5” | 启用H5播放器，是wechat安卓版特性 |
| x5-video-player-fullscreen=“true” | 全屏设置，设置为 true 是防止横屏 |
| x5-video-orientation=“portraint” | 播放器屏幕的方向，landscape横屏，portraint竖屏，默认值为竖屏。 |
| source | 标签是为了能够兼容各种浏览器对不同媒体类型的支持，我们可以用多个source元素来提供多个不同的媒体类型。支持mp4格式视频流的浏览器可以播放mp4文件，如果不支持，可以播放ogg文件。 |
| codecs=dirac, speex | 是用来指定播放使用的解码器(codecs); 这样就可以更精确的让浏览器如何播放提供的视频。 |
方法介绍
只读属性
duration ---获取媒体文件的播放时长，以s为单位，如果无法获取则为NaN，当触发canplay事件后就可以获取当前总长度
startTime---返回起始播放时间，一般是0.0,除非是缓冲过的媒体文件，并一部分内容已经不再缓冲区(此属性好像已经不可用)
paused-----判断是否已经暂停，返回true/false
ended-----判断是否已经播放完毕，返回true/false
error----在发生了错误后，返回错误代码
currentSrc --以字符串的形式发挥正在播放或已经加载的文件，对应浏览器在source元素中选择的文件
buffered---获取当前缓冲区大小，返回TimeRanges对象
可控制属性
src----指定音频的文件位置
autoplay---是否自动播放
preload----是否预加载
loop------是否循环播放
controls----显示或隐藏用户控制界面
autobuffer---媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性(此属性好像已经不可用)
muted------设置是否静音
volume ----在0.0到1.0间的音量值，或查询当前音量值
currentTime--以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置方法
load() ---加载音频、视频软件
paly() ---播放
pause()---暂停
canPlayType(obj) ----测试饭后指定指定的Mime类型的文件事件
loadstart ---客户端开始请求数据
progress----正在播放的时候不停触发，如果暂停不会触发，触发的时间间隔比较大
play------play()和autopaly播放时，类似事件onplaying
pause-----pause()方法触发时
ended-----当结束播放时
timeupdate----当前播放时间发生改变的时候，播放中常用的时间处理，如果暂停不会触发，触发的时间间隔比较小
canplaythrough---歌曲已经载入完成
canplay -----缓冲至可播放状态，类似事件onloadedmetadata
onloadedmetadata----当元数据（比如分辨率和时长）被加载时运行的脚本
事件介绍
| 事件 | 描述 |
|---|---|
| loadstart | 浏览器开始在网上寻找媒体数据 |
| progress | 浏览器正在获取媒体数据 |
| suspend | 浏览器暂停获取媒体数据，但是下载过程并滑正常结束 |
| abort | 浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的 |
| error | 获取媒体数据过程中出错 |
| emptied | video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误 2.在浏览器正在选择支持的播放格式时，又调用 了load方法重新载入媒体 |
| stalled | 浏览器尝试获取媒体数据失败 |
| play | 即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性 |
| pause | 播放暂停，当执行了pause方式时触发 |
| loadedmetadata | 浏览器获取完毕媒体的时间长和字节数 |
| waiting | 播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧 |
| canplay | 浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲 |
| canplaythrough | 浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲 |
| seeking | seeking属性变为true，浏览器正在请求数据 |
| seeked | seeking属性变为false，浏览器停止请求数据 |
| timeupdate | 由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变 |
| ended | 播放结束后停止播放 |
| ratechange | defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变 |
| druationchange | 播放时长被改变 |
| volumechange | volume属性（音量）被改变或muted属性（静音状态）被改变 |
一段断点续传的加载记录：
emptied video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误 2.在浏览器正在选择支持的播放格式时，又调用 了load方法重新载入媒体
timeupdate 由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变
loadedmetadata 浏览器获取完毕媒体的时间长和字节数
progress 浏览器正在获取媒体数据
canplay 浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲
play 即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性
canplaythrough 浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲
progress 浏览器正在获取媒体数据
timeupdate
progress 浏览器正在获取媒体数据
timeupdate
progress 浏览器正在获取媒体数据
timeupdate
progress 浏览器正在获取媒体数据
timeupdate
timeupdate
......
timeupdate
timeupdate
timeupdate 由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变
waiting 播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧
timeupdate 由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变
stalled 浏览器尝试获取媒体数据失败
文章来源：https://www.toymoban.com/news/detail-515871.html
到了这里，关于HTML5中video元素详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
