HTML5 向網(wǎng)頁嵌入視頻和音頻

現(xiàn)在很多網(wǎng)站上都會(huì)使用到視頻和音頻，HTML5 中提供了展示視頻和音頻的標(biāo)簽。向網(wǎng)頁嵌入視頻可以使用 <video> 標(biāo)簽，而嵌入音頻可以使用 <audio> 標(biāo)簽。這兩個(gè)標(biāo)簽都是 HTML 5 中新增的標(biāo)簽己沛，兩個(gè)標(biāo)簽中的屬性和方法也很類似，但也有些不同距境。其中 audio 元素用于定義聲音申尼，比如音樂， video 元素用于定義視頻垫桂，如電影等师幕。

向網(wǎng)頁中嵌入視頻

<video> 標(biāo)簽可以用于定義視頻，且提供了播放诬滩、暫停霹粥、音量控件來控制視頻灭将。舉個(gè)例子，像我們俠課島網(wǎng)站上后控，課程視頻播放庙曙，就是通過 <video> 標(biāo)簽來實(shí)現(xiàn)的。下面我們來看一下如何向網(wǎng)頁中嵌入一個(gè)視頻浩淘。

示例：

首先我們準(zhǔn)備一個(gè)視頻捌朴，例如一個(gè) test.mp4，然后使用 <video> 標(biāo)簽嵌入視頻馋袜，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
    </body>
</html>

在瀏覽器中的預(yù)覽效果：

從上圖中可以看到男旗，我們通過 <video> 標(biāo)簽成功向網(wǎng)頁中插入了一個(gè)視頻舶斧，其中 src 屬性用于引入要播放的視頻的 URL欣鳖，注意視頻地址一定要正確，如果地址錯(cuò)誤茴厉，視頻是不能顯示的泽台。然后我們通過 width、height 屬性設(shè)置了視頻的寬度為 700px 矾缓，高度為 400px怀酷。

然后可以看到，視頻上還顯示了播放嗜闻、調(diào)整音量等控件蜕依，當(dāng)我們點(diǎn)擊播放按鈕時(shí)，視頻就會(huì)開始播放琉雳。這是因?yàn)槲覀冊O(shè)置了 controls 屬性样眠，如果我們沒有設(shè)置這個(gè)屬性，視頻將會(huì)顯示一個(gè)靜止的畫面翠肘，并且不管怎么點(diǎn)擊都是沒有反應(yīng)的檐束。大家可以試一下，不設(shè)置 controls 屬性然后在瀏覽器中查看演示效果束倍，這里就不演示給大家看了被丧。

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

屬性	描述
src	將要播放的視頻的 URL
controls	如果設(shè)置該屬性，則向用戶顯示控件绪妹，例如播放按鈕甥桂，音量按鈕等
autoplay	如果設(shè)置該屬性，則視頻在就緒后馬上播放邮旷，設(shè)置了 autoplay 后會(huì)忽略屬性 preload
width	設(shè)置視頻播放器的寬度
height	設(shè)置視頻播放器的高度
loop	如果設(shè)置該屬性黄选，則當(dāng)媒介文件完成播放后再次開始播放
muted	設(shè)置視頻的音頻輸出應(yīng)該被靜音
poster	規(guī)定視頻下載時(shí)顯示的圖像，或者在用戶點(diǎn)擊播放按鈕前顯示的圖像
preload	如果設(shè)置該屬性廊移，則視頻在頁面加載時(shí)進(jìn)行加載糕簿，并預(yù)備播放

有些比較老的瀏覽器可能不支持 <video> 標(biāo)簽探入，例如 IE8 及以下的瀏覽器就不支持，而 IE9+懂诗、Firefox蜂嗽、Opera、Chrome殃恒、Safari 等瀏覽器都支持 <video> 標(biāo)簽植旧。

所以我們可以在 <video> 標(biāo)簽中放置文本內(nèi)容，這樣當(dāng)某個(gè)瀏覽器不支持此標(biāo)簽時(shí)离唐，就可以顯示提示內(nèi)容：

<video src="./test.mp4" controls="controls" width="700px" height="400px">
    您的瀏覽器不支持 video 標(biāo)簽
</video>

這樣用戶就會(huì)知道病附，是因?yàn)闉g覽器不支持所以加載視頻不成功，可以換一個(gè)瀏覽器亥鬓。

視頻的格式

像我們平時(shí)看到的視頻格式有很多種完沪，例如常見的有 mp4、AVI嵌戈、mov覆积、rmvb、Ogg 等等熟呛，目前 video 元素支持的視頻格式有下面三種：

視頻格式	描述
Ogg	帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG 4（MP4）	帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM	帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

這三種視頻格式宽档，在不同的瀏覽器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器庵朝，Ogg 格式不支持IE吗冤、Safari 瀏覽器，WebM 格式不支持IE九府、Safari 瀏覽器等椎瘟。

所以我們可能需要在不同的瀏覽器中使用不同的視頻格式，這需要用到 <source> 標(biāo)簽昔逗。

source標(biāo)簽

<source> 標(biāo)簽可以為媒體元素定義媒介資源降传，例如 video 和 audio 元素。

例如 <video> 標(biāo)簽中可以包含多個(gè) <source> 標(biāo)簽勾怒，<source> 標(biāo)簽可以鏈接不同的視頻文件婆排，瀏覽器將使用第一個(gè)可識別的格式。

示例：

例如我們插入的視頻播放器笔链，帶有兩個(gè)源文件段只，瀏覽器會(huì)根據(jù)需要來選擇源文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video controls="controls" width="700px" height="400px">
            <source src="./test.mp4" type="video/mp4">
            <source src="./test.ogg" type="video/ogg">
            您的瀏覽器不支持 video 標(biāo)簽
        </video>
    </body>
</html>

像上述代碼中，如果是 Safari 瀏覽器就會(huì)選擇第一個(gè)源文件鉴扫，如果是 Firefox 瀏覽器則會(huì)選擇第二個(gè)源文件赞枕。

<source> 標(biāo)簽有三個(gè)屬性：

屬性	描述
src	用于規(guī)定媒體文件的 URL
media	用于規(guī)定媒體資源的類型，供瀏覽器決定是否下載
type	用于規(guī)定媒體資源的 MIME 類型，常用的 MIME 類型有 video/ogg炕婶、video/mp4姐赡、video/webm

向網(wǎng)頁中嵌入音頻

向網(wǎng)頁中嵌入音頻可以使用 <audio> 標(biāo)簽，此標(biāo)簽的使用和 <video> 標(biāo)簽類似柠掂。插入視頻是有畫面的项滑，我們也可以調(diào)整視頻的寬和高等，而插入音頻是沒有畫面的涯贞。

audio 元素支持的格式和 video 元素也有一點(diǎn)區(qū)別：

音頻格式	MIME類型
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

示例：

例如我們插入一段音頻枪狂，在瀏覽器中可以看到，是沒有畫面的宋渔，只有聲音：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <audio controls="controls">
            <source src="./test.mp4" type="audio/mpeg">
            <source src="./test.ogg" type="audio/ogg">
            您的瀏覽器不支持 audio 標(biāo)簽
        </audio>
    </body>
</html>

在瀏覽器中的演示效果：

向網(wǎng)頁中嵌入音頻時(shí)州疾，也可以通過 <source> 標(biāo)簽來指定兩個(gè)源文件，<source> 標(biāo)簽允許規(guī)定兩個(gè)視頻或者音頻文件供瀏覽器根據(jù)它對媒體類型或者編解碼器的支持進(jìn)行選擇皇拣。

audio 元素中的常用屬性和 video 元素差不多严蓖，但是 audio 元素中沒有 width、height 等屬性审磁。

常用屬性如下所示：

屬性	描述
src	要播放的音頻的 URL
controls	如果設(shè)置該屬性谈飒，則向用戶顯示控件，例如播放按鈕
autoplay	如果設(shè)置該屬性态蒂，則音頻在就緒后馬上播放
loop	如果設(shè)置該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開始播放
muted	規(guī)定音頻輸出應(yīng)該被靜音
preload	如果設(shè)置該屬性费什，則音頻在頁面加載時(shí)進(jìn)行加載钾恢，并預(yù)備播放

總結(jié)

向網(wǎng)頁中嵌入視頻和音頻其實(shí)很簡單，要注意 video 元素和 audio 元素支持的視頻鸳址、音頻格式類型瘩蚪，如果插入的視頻格式不支持，則視頻或音頻不會(huì)顯示稿黍。

更多可以查看鏈接：https://www.9xkd.com/