HTML基础之 HTML5新增视频和音频标签

HTML5 新增多媒体标签主要包含两个：

音频：audio
视频：video

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

视频: video

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

在网页中如果看原网页的话，可以发现很多时候引入的视频文件有好几个格式，因为兼容问题，不同的浏览器支持不同的格式而已，目前只支持三个格式，MP4，WebM，Ogg。浏览器支持的格式：

浏览器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES	YES	YES

所以为了兼容性更好，一般都使用mp4格式。

具体格式：

<video src="文件地址" controls="controls"></video>

但是为了兼容有些浏览器不兼容，不支持video标签如下写：

<video width='320' height='240' controls>
<source src="文件地址" type="type/mp4">
    <source src="文件地址" type="type/ogg">
</video>

video的属性值：


autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。`但是谷歌浏览器需要添加muted来解决自动播放问题。`
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	auto：预先加载视频。 none：不应加载视频	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

如果只是单独的引入资源，虽然引入但是没有播放效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"   > 2013赛博朋克2077广告 </video>
</body>
</html>

在这里插入图片描述

所以在引入数据的时候，就应该带有其它的属性。

演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"   autoplay="autoplay" muted="muted"> 2013赛博朋克2077广告 </video>
</body>
</html>

在这里插入图片描述

可以看出可以自动播放，但是没有进度条声音等控制的选项，这个就需要controls属性。虽然演示一下，但是一般不会主动写这个属性，因为其在不同的浏览器中比如播放按钮等会有不同的样式，所以一般为了让其样式统一，通过js进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"  controls="controls"  autoplay="autoplay" muted="muted"> 2013赛博朋克2077广告 </video>
</body>
</html>

在这里插入图片描述

还有很多产品网页视频在不停的循环播放，那个就需要loop属性了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"  controls="controls"  autoplay="autoplay" muted="muted" loop="loop"> 2013赛博朋克2077广告 </video>
</body>
</html>

还有一个属性，那就是网速不够好，加载视频需要时间，如果单独看一个加载界面很难，所以就需要一个等待图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"  controls="controls"  autoplay="autoplay" muted="muted" loop="loop" poster="文件地址"> 2013赛博朋克2077广告 </video>
</body>
</html>

音频 audio

音频也是支持三种格式：mp4,Wav,Ogg.

当然也有支持：

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

所以一般的时候音频文件都使用mp3.

格式：

<audio src="文件地址" controls="controls"></audio>

当然为了兼容低版本可以如下写：

<audio width='320' height='240' controls>
<source src="文件地址" type="type/mp3">
    <source src="文件地址" type="type/ogg">
</audio>

当然也有其属性：

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

因两者使用很类似，就不在演示了。

需要注意一下：

谷歌浏览器把音频和视频的自动播放禁止了，所以视频需要添加muted属性。但是音频不能通过muted控制，需要js进行控制。
一般网页中视频经常设置为自动播放，所以不适用controls,当然如果有需要也是通过js来实现，毕竟为了显示的ui统一。