HTML5 向网页嵌入视频和音频-技术圈

来源 | http://www.fly63.com/article/detial/9503

现在很多网站上都会使用到视频和音频，html5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用

首先我们准备一个视频，例如一个 test.mp4，然后使用

                    HTML5学习(9xkd.com)

在浏览器中的预览效果：

从上图中可以看到，我们通过

然后我们通过 width、height 属性设置了视频的宽度为 700px ，高度为 400px。

然后可以看到，视频上还显示了播放、调整音量等控件，当我们点击播放按钮时，视频就会开始播放。

这是因为我们设置了 controls 属性，如果我们没有设置这个属性，视频将会显示一个静止的画面，并且不管怎么点击都是没有反应的。大家可以试一下，不设置 controls 属性然后在浏览器中查看演示效果，这里就不演示给大家看了。

video 元素中的常用属性如下所示：

有些比较老的浏览器可能不支持

所以我们可以在

  您的浏览器不支持 video 标签

这样用户就会知道，是因为浏览器不支持所以加载视频不成功，可以换一个浏览器。

像我们平时看到的视频格式有很多种，例如常见的有 mp4、AVI、mov、rmvb、Ogg 等等，目前 video 元素支持的视频格式有下面三种：

这三种视频格式，在不同的浏览器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 浏览器，Ogg 格式不支持IE、Safari 浏览器，WebM 格式不支持IE、Safari 浏览器等。

所以我们可能需要在不同的浏览器中使用不同的视频格式，这需要用到标签。

标签可以为媒体元素定义媒介资源，例如 video 和 audio 元素。

例如

例如我们插入的视频播放器，带有两个源文件，浏览器会根据需要来选择源文件：


                    HTML5学习(9xkd.com)                                                    您的浏览器不支持 video 标签

像上述代码中，如果是 Safari 浏览器就会选择第一个源文件，如果是 Firefox 浏览器则会选择第二个源文件。

标签有三个属性：

向网页中嵌入音频可以使用

audio 元素支持的格式和 video 元素也有一点区别：

例如我们插入一段音频，在浏览器中可以看到，是没有画面的，只有声音：


                    HTML5学习(9xkd.com)                                                    您的浏览器不支持 audio 标签

在浏览器中的演示效果：

向网页中嵌入音频时，也可以通过标签来指定两个源文件，标签允许规定两个视频或者音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

audio 元素中的常用属性和 video 元素差不多，但是 audio 元素中没有 width、height 等属性。

常用属性如下所示：

向网页中嵌入视频和音频其实很简单，要注意 video 元素和 audio 元素支持的视频、音频格式类型，如果插入的视频格式不支持，则视频或音频不会显示。

本文完~