音频/视频标签的使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

音视频的发展史

早期：

<embed>+<object>+文件

问题：并没有在各大浏览器中统一规范,兼容性很差。

中期：

Realplay、window media、Quick Time 、Flash

问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。而安卓也在4.0版本之后不再支持Flash，因为Flash很占内存。

现在:

HTML5新增了video标签(视频)和audio标签(音频),并兼容各大浏览器。

一、视频标签

定义

 <video> 标签定义视频，比如电影片段或其他视频流。
 目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放、暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL(绝对/相对)	规定视频正在下载时显示的图像，直到用户点击播放按钮。(类似海报)
preload	auto、metadata、none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	URL()	要播放的视频的 URL。
width	pixels(像素)	设置视频播放器的宽度。
height	pixels(像素)	设置视频播放器的高度。

写法

多个格式文件时,浏览器根据条件进行选择。

<video width="320" height="240" controls autoplay loop  muted  
 poster="/images/xxx.gif"  preload="auto|metadata|none">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

如果只有一个格式文件,可以这样写:

<video src="movie.mp4" controls>
您的浏览器不支持 video 标签。
</video>

HTML 与 XHTML 之间的区别:

在 XHTML 中, 属性不允许简写，autoplay 属性必须定义为： <video autoplay="autoplay">。
在 XHTML中, 属性不允许简写，controls 属性必须定义为： <video controls="controls">。
在 XHTML 中, 属性不允许简写， loop 属性必须定义为 <video loop="loop">。
在 XHTML 中, 属性不允许简写， muted 属性必须定义为 <video muted="muted">。

二、音频标签

定义

<audio> 标签定义声音，比如音乐或其他音频流。

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

属性

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

写法

多个格式文件时,浏览器根据条件进行选择。

<audio controls autoplay loop  preload="auto|metadata|none">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

如果只有一个格式文件,可以这样写:

<audio src="horse.ogg" controls>
您的浏览器不支持 audio 元素。
</audio>

HTML 与 XHTML 之间的区别:

在 XHTML 中, 属性不允许简写，autoplay 属性必须定义为： <video autoplay="autoplay">。
在 XHTML中, 属性不允许简写，controls 属性必须定义为： <video controls="controls">。
在 XHTML 中, 属性不允许简写， loop 属性必须定义为 <video loop="loop">。
在 XHTML 中, 属性不允许简写， muted 属性必须定义为 <video muted="muted">。

总结

以上就是音频/视频标签的使用，具体属性详情可以点击表格进行查看。