re:从0开始的HTML学习之路 11. 音视频标签

1. 音视频标签

向页面中引入音频/视频。二者使用方式一样

2. 二者常用属性

controls：是否允许用户控制播放，不加则不允许
autoplay：控制是否自动播放
loop：控制是否循环播放
注意：
HTML5中若属性名与属性值相同，="属性值"可以不写
Chrome的autoplay受浏览器的控制，Edge的话就会直接播放

3. 使用audio标签向页面中引入一个音频

1. 添加音频的方式1
   看这一句代码：

   <audio src="/images/1.mp3"></audio>
   

   如果没有写属性controls的话，在页面中就不会显示播放的操作控件
   
   所以如果想要控制播放的话一定记得要加上controls属性
   tips:不加controls且加autoplay就变成了网页的背景音乐，关不掉的那种~

   <audio src="/images/1.mp3" controls="controls" autoplay></audio>
   

2. 添加音频的方式2：可以嵌套source标签引入音频
   优点：可以处理浏览器的兼容性问题，所以常用这一种方式

   <audio controls>
   	<source src="/images/1.mp3">
   </audio>
   

4. 使用video标签向页面中引入一个视频

和audio标签的使用方法一样，也是有两种，同样推荐第二种

<video controls>
	<source src="/images/1.mp4">
</video>

5. 为什么可以处理浏览器的兼容性问题？

	<audio controls>
		<source src="/images/1.mp3">
	</audio>

按照嵌套source标签引入的话，可以在一对audio中填很对的source，并且可以写上提示语，如下

<audio controls>
	浏览器版本过低！
	<source src="/images/1.mp3">
	<source src="/images/1.ogg">
</audio>

浏览器会自动找支持的播放格式，如果没有能播放的格式，就会显示提示文字，比如IE 9以上才支持音视频标签，IE 8打开的话就是一片空白，此时就会显示浏览器版本过低！的文字提示