移动端第四章音频视频

科技2022-07-16 121

音频视频

audio 音频

音频属性 controls 控制面板 src 路径 loop 循环次数 autoplay 自动播放 (谷歌浏览器不支持自动播放) muted 静音播放

举例：格式支持： MP3,ogg,Wav

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>    <audio controls autoplay muted loop='3'> <source src="src/1.mp3"/> <source src="src/1.ogg"/> <source src="src/1.Wav"/> </audio> </body> </html>

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) // }

Processed: 0.012, SQL: 8