H5 --- 音频视频

audio 音频

音频属性 controls控制面板 src 路径 loop 循环次数 autoplay 自动播放 muted 静音播放

video 视频

视频属性 width 宽 height 高 poster 指定播放开始画面 source 浏览器对视频的格式要求不一样，为了兼容浏览器，所以用到source标签 source标签可以让浏览器自己选择可以播放的视频格式 举例：

<video width="800" height=""> //source指的是数据来源哪个地方，我们的音频视频有多种格式 <source src="myvideo.mp4" type="video/mp4"></source> <source src="myvideo.ogv" type="video/ogg"></source> <source src="myvideo.webm" type="video/webm"></source> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a> </video>

网络状态改变事件

online 网络连接事件 offline 网络断开事件

全屏操作的属性和方法

全屏打开方法 RequestFullScreen() webkitRequestFullScreen() 谷歌浏览器打开方法 mozRequestFullScreen() 狐火浏览器打开方法 msRequestFullScreen() IE浏览器打开方法

兼容做法:

if(Element.requestFullScreen){ Element.requestFullScreen() }else if(Element.webkitRequestFullScreen){ Element.webkitRequestFullScreen() }else if(Element.mozRequestFullScreen){ Element.mozRequestFullScreen() }else if(Element.msRequestFullScreen){ Element.msRequestFullScreen() }

退出全屏方法 CancelFullScreen() webkitCancelFullScreen() 谷歌浏览器打开方法 mozCancelFullScreen() 狐火浏览器打开方法 msCancelFullScreen() IE浏览器打开方法 全屏退出要用到document

兼容做法:

if(document.requestFullScreen){ document.requestFullScreen() }else if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen() }else if(document.mozCancelFullScreen){ document.mozCancelFullScreen() }else if(document.msCancelFullScreen){ document.msCancelFullScreen() } // 是否是全屏状态属性 FullScreenElement // 判断是否全屏状态 if(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullscreenElement||document.msFullScreenElement){ alert(true) }else{ alert(false) }