html5 播放视频代码-HTML5 将视频和音频嵌入网页

来源 |

现在很多网站都使用视频和音频，html5中提供了显示视频和音频的标签。 在网页中嵌入视频可以使用标签，嵌入音频可以使用标签。 这两个标签是html 5中新增的标签，两个标签中的属性和方法类似，但也有一些区别。 音频元素用于定义声音，例如音乐，视频元素用于定义视频，例如电影。

在网页中嵌入视频

标签可用于定义视频，并提供播放、暂停和音量控制来控制视频。 比如我们侠客岛网站，课程视频的播放就是通过标签来实现的。 让我们看一下如何将视频嵌入到网页中。

例子：

首先我们打算制作一个视频，比如一个test.mp4，然后使用标签来嵌入视频，如下：

在浏览器中预览效果：

从上图可以看出，我们已经成功通过标签在网页中插入了一个视频，并且src属性用于引入要播放的视频的URL。 注意视频地址一定要正确。 如果地址错误，视频将无法显示。

然后我们通过width和height属性将视频的长度设置为700px，高度设置为400px。

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

这是因为我们设置了controls属性html5 播放视频代码，如果不设置该属性，视频会显示静止图像，无论怎么点击都没有反应。 大家可以尝试一下，在浏览器中查看演示效果，不需要设置controls属性，这里就不给大家展示了。

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

某些较旧的浏览器可能不支持选项卡。 例如，IE8及以下浏览器不支持选项卡，而IE9+、Firefox、Opera、Chrome和Safari等浏览器均支持选项卡。

所以我们可以在标签中放置文本内容，这样当浏览器不支持该标签时，可以显示提示：

  您的浏览器不支持 video 标签

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

视频格式

我们平时看到的视频格式有很多种，比如mp4、AVI、mov、rmvb、Ogg等。目前video element支持以下三种视频格式：

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

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

源标签

标签可以定义媒体元素（例如视频和音频元素）的媒体资源。

例如，一个标签可以包含多个标签，标签可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

例子：

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

                                                                        您的浏览器不支持 video 标签            

如上面的代码html5 播放视频代码，如果是Safari浏览器，则选择第一个源文件，如果是Firefox浏览器，则选择第二个源文件。
标签具有三个属性：

将音频嵌入网页
您可以使用标签将音频嵌入到网页中，该标签的使用与标签类似。 插入的视频有图片，我们也可以调整视频的宽度和高度，但是插入的音频没有图片。
音频元素支持的格式也与视频元素略有不同：
例子：
比如我们插入一段音频，在浏览器中可以看到，没有图片，只有声音：
                                    <audio controls="controls">                                    您的浏览器不支持 audio 标签            

在浏览器中的演示效果：
在网页中嵌入音频时，还可以通过标签指定两个源文件。 该标签允许您指定两个视频或音频文件，供浏览器根据其对媒体类型或编解码器的支持进行选择。
audio元素中常用的属性与video元素中的类似，但是audio元素中没有宽度、高度等属性。
常用属性如下：
总结
将视频和音频嵌入网页实际上非常简单。 注意视频元素和音频元素支持的视频和音频格式类型。 如果插入的视频格式不支持，则不会显示视频或音频。
这篇文章就结束了~