# HTML5教程 - 14 音视频

我们除了可以在页面中引入图片，还可以在页面中引入音频和视频。

# 14.1 音频

可以在页面中使用 <audio> 标签来引入一个外部的音频文件。

<audio> 标签常用属性：

controls ：是否允许用户控制播放，如果不添加该属性，播放器组件是不在页面显示的，只是作为页面的背景音乐，用户无法进行控制；
autoplay ：音频是否自动播放，如果设置了 autoplay，则音乐在打开页面时会自动播放。但是目前来讲大部分浏览器都不会自动对音乐进行播放，主要是怕声音可能突然太大体验不好，所以这个属性可能不好使。一般在实际开发中，自动播放都是通过JavaScript来控制的；
loop ：音频是否循环播放。

下面演示一下使用，我找到了一个音频文件，放入到项目中，结构如下：

代码如下：

<body>
    <audio src="assets/audio.mp3" controls autoplay loop></audio>
</body>

1
2
3

最终在Chrome浏览器的效果显示如下：

但是当我们使用低版本的浏览器，例如IE8打开的时候，发现什么都没有。

那么怎么办呢？

# 14.2 source

为什么在IE8下什么都没有显示呢？

因为有的浏览器比较旧，对 **<audio> 标签不支持，**所以就没有显示出标签。但是不显示也就罢了，起码给个提示吧。

如何给个提示呢？

那么我们可以使用 <source> 标签进行优化，代码如下：

<body>
    <audio controls autoplay loop>
        <source src="assets/audio.mp3" />
        对不起，您的浏览器不支持播放音频，请升级浏览器。
    </audio>
</body>

1
2
3
4
5
6

上面通过 source 标签的 src 属性来指定文件的路。当浏览器支持 audio 标签的时候，会根据 source 标签指定的路径加载音频文件。当浏览器不支持 audio 标签的时候，标签 <audio> 和 <source> 是不显示的，只会显示文字。

IE8 中显示如下：

同样，当浏览器对指定的音频格式可能不支持，可以使用 source 标签指定多个音频格式，当浏览器匹配到自己支持的音频格式时，就会加载改音频文件。

<body>
    <audio controls autoplay loop>
        <source src="assets/audio.mp3" />
        <source src="assets/audio.ogg" />
        对不起，您的浏览器不支持播放音频！请升级浏览器！
    </audio>
</body>

1
2
3
4
5
6
7

当浏览器支持 mp3 格式的时候，会播放 mp3 格式文件，如果浏览器不支持，会继续向下匹配，当匹配到支持 ogg 文件时，就会播放 ogg 文件。

现在浏览器一般各个音频格式都支持，但是如果为了兼容旧版本的浏览器，则需要用到上面的方法。当然上面的方式还是无法在低版本的浏览器播放音频文件的，例如IE8。

如果你说老子就想要在IE8播放音频文件，那怎么办呢，可以使用 <embed> 元素。

# 14.3 embed

IE8 下不支持 <audio> 标签，但是可以使用 <embed> 元素在文档中的指定位置嵌入外部内容。

这个内容是由外部应用程序或其他互动内容的来源提供的，如浏览器插件。

<body>
    <audio controls autoplay loop>
        <embed src="assets/audio.mp3" type="audio/mpeg" width="400" height="50" />
    </audio>
</body>

1
2
3
4
5

使用 <embed> 标签的 src 指定文件的路径，type 指定媒体资源的 MIME 类型。音频常用的MIME 类型：audio/ogg 、audio/mpeg 。

最终在IE8显示如下：

但是 <embed> 标签局限性很大，所以我们应该在高版本浏览器使用 <audio> 标签，在低版本浏览器使用 <embed>。

所以完美的写法如下：

<body>
    <audio controls autoplay loop>
        <source src="assets/audio.mp3" />
        <embed src="assets/audio.mp3" type="audio/mpeg" width="400" height="50" />
    </audio>
</body>

1
2
3
4
5
6

这里尺寸后面是可以通过 CSS 来设置的，这里可以忽略。这样高版本浏览器识别和支持 audio 和 source 标签，完成解析；低版本识别并解析 <embed> 标签。

# 14.4 视频

使用 <video> 标签来向网页中引入一个视频，使用方式和 <audio> 标签基本上是一样的。

所以这里直接演示最终完美的写法：

<body>
    <video controls width="480" height="320" >
        <source src="assets/video.mp4" type="video/mp4" />
        <embed src="assets/video.mp4" type="video/mp4" width="480" height="320" />
    </video>
</body>

1
2
3
4
5
6

Chrome显示如下，能够正常播放：

IE8 下显示如下，也能正常播放：

# 14.5 引入第三方网站视频

视频服务是比较耗费资源的，例如存储和播放的带宽，对于我们的系统而言，都是比较大的花费。

这里有一种比较 low 的处理方式，就是将我们的视频上传到第三方视频网站，然后通过链接引入。

这里以腾讯视频为例，每个视频下方都有分享按钮，点开分享，点击嵌入代码，然后复制代码放入我们自己的网页。

粘贴代码，发现其实就是使用了一个 iframe 进行了引入，我们可以设置宽度和高度。

<body>
    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=e0015jtap14" allowFullScreen="true" width="480" height="360"></iframe>
</body>

1
2
3

这种方式比较 low 是因为，一个有广告，一个是有腾讯相关的字眼。

其他视频网站也有类似的方式，了解一下。

← 13-内联框架 15-字符实体 →