移动端第四章音频视频

最新推荐文章于 2025-12-02 15:55:42 发布

原创最新推荐文章于 2025-12-02 15:55:42 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

移动端专栏收录该内容

12 篇文章

订阅专栏

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