移动端第四章音频视频

最新推荐文章于 2023-08-03 11:19:09 发布

LW0512

最新推荐文章于 2023-08-03 11:19:09 发布

阅读量167

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108920402

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

音频视频

audio 音频

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

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

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--音频-->
		<!--<audio src="src/1.mp3" controls autoplay muted>
			您的浏览器版本不支持音频
		</audio>-->
		
		<!--下面的写法是对音频格式的兼容写法-->
		<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)
//					}