首页 前端知识 HTML5中video元素详解

HTML5中video元素详解

2024-03-27 10:03:52 前端知识 前端哥 1000 17 我要收藏

https://blog.csdn.net/zhuchunyan_aijia/article/details/52277846

属性介绍

属性说明
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获取媒体数据过程中出错
emptiedvideo元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误 2.在浏览器正在选择支持的播放格式时,又调用 了load方法重新载入媒体
stalled浏览器尝试获取媒体数据失败
play即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性
pause播放暂停,当执行了pause方式时触发
loadedmetadata浏览器获取完毕媒体的时间长和字节数
waiting播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧
canplay浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲
canplaythrough浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲
seekingseeking属性变为true,浏览器正在请求数据
seekedseeking属性变为false,浏览器停止请求数据
timeupdate由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变
ended播放结束后停止播放
ratechangedefaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变
druationchange播放时长被改变
volumechangevolume属性(音量)被改变或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.qianduange.cn//article/4190.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!