H5标签之video标签和audio标签

HTML5中的新标签

video标签（5）

定义视频，比如电影片段或其他视频流。

格式：

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

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

属性

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

webm格式视频是浏览器直接可以播放的视频，mp4不可以直接播放。默认情况下不自动播放视频。

autoplay属性

如果出现该属性，则视频在就绪后马上播放。但是现在浏览器都需要授权，仅当用户同意、网站由用户激活或媒体无声时允许自动播放。

<video autoplay="autoplay" />

controls属性

如果出现该属性，则向用户显示控件，比如播放按钮。效果图如下（火狐）

在这里插入图片描述

poster属性

规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。比如说有的视频不能加载时直接播放，进去就和上图一样黑乎乎的，这个属性可以进去就显示一张图片。

<video poster="URL">

属性值

绝对URL：指向另一个网站

相对URL：指向网站内的文件

在这里插入图片描述

loop属性

一般用于广告循环播放，视频播放完成立刻继续播放。作为一个无良广告商，我们去掉controls属性，加上loop属性，嘿嘿，就让你一直循环着看。

<video loop="loop" />

preload 属性

preload 属性规定是否在页面加载后载入视频。如果设置了 autoplay 属性，则忽略该属性。(预加载)

<video preload="load" />

属性值

值	描述
load	规定是否预加载视频。可能的值： auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频

muted属性

muted 属性属于逻辑属性。当设置该属性后，它规定视频的音频输出应该被静音。

<video muted>

<video src="video/sb1.webm" autoplay="autoplay" controls="controls" loop="loop" poster="images/4.jpg" muted="muted">

video标签的第二种格式

由于视频数据很重要，这些大浏览器厂家都不愿意支持别人的视频格式，导致没有一种视频格式是所有浏览器都只支持的。统一容易出现垄断（个人觉得）w3school为了解决这个局面，推出第二个video格式。

直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式

当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

可见没有一种格式都全部支持，因此采用source标签将视频三种格式都放上去，总有一个格式。

<video>
    <source src="video/sb2.webm" type="video/webm">
    <source src="video/sb2.ogg" type="video/ogg">
    <source src="video/sb2.mp4" type="video/mp4">
</video>

虽然通过第二种格式能够指定所有浏览器都支持的视频格式，但是首先必须支持HTML5，所以为了让以前的浏览器也支持video标签来播放视频，我们可以通过一个js库html5media来实现。

audio标签（5）

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

格式与video一样，两种格式。大部分属性一样，除了poster/heignt/width

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

音频格式

当前，audio 元素支持三种音频格式：

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：