HTML中插入视频和音频方法

在使用HTML进行开发网页时，我们都知道使用image标签来插入图像元素，那么如何在网页中插入视频和音频呢？本文我们就来为大家解惑，在HTML中插入视频和音频需要用到<video>和<audio>元素来完成此操作。

自21世纪以来，Web开发人员就一直希望在Web上使用视频和音频，那时我们开始拥有足够快的带宽来支持任何类型的视频（视频文件比文本甚至图像大得多）。早期，诸如HTML之类的本地Web技术无法将视频和音频嵌入到Web中，因此专有的（或基于插件的）技术（如Flash）以及后来的Silverlight（现在都已淘汰）因处理此类内容而变得流行。这种技术行之有效，但存在许多问题，包括与HTML/CSS功能的配合不良，安全性问题和可访问性问题。幸运的是，几年后，HTML5规范添加了这样的功能，并带有<video>和<audio>元素，以及一些用于控制它们的新颖的JavaScript API。

一、<video>元素

该<video>元素使您可以非常轻松地嵌入视频。一个非常简单的示例如下所示：

<video src="rabbit320.webm"controls>

<p>Your browser doesn't support HTML5 video.Here is a<a href="rabbit320.webm">link to the video</a>instead.</p>

</video>

注释的特征是：

1.Src

与<img>元素相同，src（source）属性包含您要嵌入的视频的路径。它的工作方式完全相同。

2.Controls

用户必须能够控制视频和音频的播放（这对于癫痫病患者尤为重要。）您必须使用该controls属性来包含浏览器自己的控制界面，或者使用适当的JavaScript API来构建界面。界面至少必须包括一种启动和停止媒体以及调节音量的方法。

<video>标签内的段落：

这称为备用内容-如果访问页面的浏览器不支持<video>元素，则会显示该内容，从而使我们能够为较旧的浏览器提供备用内容。这可以是您喜欢的任何东西；在这种情况下，我们提供了到视频文件的直接链接，因此用户无论使用什么浏览器，都至少可以某种方式访问它。

二、<audio>元素

该<audio>元件的工作原理就像<video>概述如下元素，有一些小的差异。一个典型的示例可能如下所示：

<audio controls>

<source src="viper.mp3"type="audio/mp3">

<source src="viper.ogg"type="audio/ogg">

<p>Your browser doesn't support HTML5 audio.Here is a<a href="viper.mp3">link to the audio</a>instead.</p>

</audio>

这会在浏览器中生成类似以下内容的内容：

具有播放按钮，计时器，音量控制和进度条的简单音频播放器。与视频播放器相比，它占用的空间更少，因为它没有视觉组件，只需要显示控件即可播放音频。

通过本文的学习，我们希望你能够掌握HTML中插入视频和音频的方法，然后当打开HTML文件，在本地试看网页显示的效果时，你自己的视频会在网页面上展现。在本站的HTML教程中，有很多十分优雅的网页模板，感兴趣的小伙伴可以参考设计出自己喜爱的网页。