Video标签事件与属性

事件与属性

属性    描述
audioTracks    返回可用的音轨列表（MultipleTrackList对象）
autoplay    媒体加载后自动播放
buffered    返回缓冲部件的时间范围(TimeRanges对象)
controller    返回当前的媒体控制器（MediaController对象）
controls    显示播控控件
crossOrigin    CORS设置
currentSrc    返回当前媒体的URL
currentTime    当前播放的时间，单位秒
defaultMuted    缺省是否静音
defaultPlaybackRate    播控的缺省倍速
duration    返回媒体的播放总时长，单位秒
ended    返回当前播放是否结束标志
error    返回当前播放的错误状态
initialTime    返回初始播放的位置
loop    是否循环播放
mediaGroup    当前音视频所属媒体组 (用来链接多个音视频标签)
muted    是否静音
networkState    返回当前网络状态
paused    是否暂停
playbackRate    播放的倍速
played    当前播放部件已经播放的时间范围(TimeRanges对象)
preload    页面加载时是否同时加载音视频
readyState    返回当前的准备状态
seekable    返回当前可跳转部件的时间范围(TimeRanges对象)
seeking    返回用户是否做了跳转操作
src    当前音视频源的URL
startOffsetTime    返回当前的时间偏移(Date对象)
textTracks    返回可用的文本轨迹(TextTrackList对象)
videoTracks    返回可用的视频轨迹(VideoTrackList对象)
volume    音量值

属性

 

事件    描述
abort    当音视频加载被异常终止时产生该事件
canplay    当浏览器可以开始播放该音视频时产生该事件
canplaythrough    当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange    当媒体的总时长改变时产生该事件
emptied    当前播放列表为空时产生该事件
ended    当前播放列表结束时产生该事件
error    当加载媒体发生错误时产生该事件
loadeddata    当加载媒体数据时产生该事件
loadedmetadata    当收到总时长，分辨率和字轨等metadata时产生该事件
loadstart    当开始查找媒体数据时产生该事件
pause    当媒体暂停时产生该事件
play    当媒体播放时产生该事件
playing    当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress    当获取到媒体数据时产生该事件
ratechange    当播放倍数改变时产生该事件
seeked    当用户完成跳转时产生该事件
seeking    当用户正执行跳转时操作的时候产生该事件
stalled    当试图获取媒体数据，但数据还不可用时产生该事件
suspend    当获取不到数据时产生该事件
timeupdate    当前播放位置发生改变时产生该事件
volumechange    当前音量发生改变时产生该事件
waiting    当视频因缓冲下一帧而停止时产生该事件

事件

转：https://blog.csdn.net/Take_Dream_as_Horse/article/details/53422397

video的暂停、播放事件，并切换清晰度

（1）暂停的时候显示广告图片（图片有跳转链接）

（2）切换清晰度后，视频按切换前播放时间继续自动播放（或者暂停播放）

注:最好在没个video标签外定义一个div盒子，这样便于定位广告图片的位置或者自定义的操作按钮的位置

    同时说明一下 video常用属性：controls:是否显示控制按钮 autoplay：是否加载完成自动播放

html

<span style="color:#ff0000;">   </span><div class="video">  
        <video id="media"  controls="controls"   width="600" height="400">  
            <source src="video/video.mp4" type="video/mp4" />  
            您的浏览器版本太低,请及时更新  
        </video>  
        <a href="http://www.baidu.com" targe