1.2 HTML5新增的多媒体标签

1.2 HTML5新增的多媒体标签

新增的多媒体标签主要包含两个∶

1. 音频: <audio>

2. 视频: <video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。

1.2.1 视频 <video>

HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。

当前 <video> 元素支持三种视频格式:尽量使用mp4格式

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从 Opera 25 版本开始	YES	YES

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

  <!-- <video src="./media/video.mp4" controls="controls"></video> -->
  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
  </video>

 

1.2.2 音频 <audio>

当前 <audio> 元素支持三种音频格式:

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

<audio controls>
    <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
    <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
    <!-- 因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件 -->  
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

1.2.3 多媒体标签总结

• 音频标签和视频标签使用基本一致

• 多媒体标签在不同浏览器下情况不同，存在兼容性问题

• 谷歌浏览器把音频和视频标签的自动播放都禁止了

• 谷歌浏览器中视频添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）

• 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性