在使用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教程中，有很多十分優雅的網頁模板，感興趣的小伙伴可以參考設計出自己喜愛的網頁。