《基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁設(shè)計(jì)進(jìn)階教程》課件-第2章

第2章HTML5的多媒體2.1容器格式和編/解碼格式2.2瀏覽器支持特性檢測2.3視頻、音頻的腳本控制2.4HTML5中的音頻2.5HTML5中的視頻

2.1容器格式和編/解碼格式

2.1.1視頻、音頻的容器我們常見的視頻文件的擴(kuò)展名有mkv、avi、mp4等，音頻文件的擴(kuò)展名有mp3、wav等，其實(shí)這些僅僅只是容器的格式，它們類似于壓縮了一組文件的壓縮包文件。對于一個(gè)視頻文件(視頻容器)，一般包含了視頻軌道、音頻軌道及其他一些元數(shù)據(jù)，如圖2-1所示。圖2-1視頻容器

目前，視頻文件(視頻容器)種類有很多，此處只列舉一些最常見的：

●?AudioVideoInteractive(.avi)

●?FlashVideo(.flv)

●?MPEG-4(.mp4)

●?Matroska(.mkv)

●?Ogg(.ogv)

●?WebM(.webm)

2.1.2視頻、音頻的編/解碼器

視頻、音頻的編/解碼器其實(shí)就是一組算法，用來對視頻或音頻進(jìn)行編碼和解碼。對視頻和音頻進(jìn)行編碼，是為了它們能夠快速地傳播。

需要注意的是，不同容器格式對應(yīng)的編/解碼器是不同的。

常見的音頻編/解碼器如下：

●?ACC

●?MPEG-3

●?OggVorbis

常見的視頻編/解碼器如下：

●?H.264

●?VP8

●?OggTheora

有些編/解碼器是免費(fèi)的，有些則受專利保護(hù)，需要付費(fèi)，雖然HTML5很想統(tǒng)一指定編/解碼器，但實(shí)施起來卻困難重重，最后不得不放棄對編/解碼器的要求。因此而引發(fā)的問題就是各種不同的瀏覽器對視頻格式的支持是有區(qū)別的，后面我們將會(huì)詳細(xì)講解。Web開發(fā)人員只能熟悉各種瀏覽器對視頻和音頻編/解碼器的支持情況，并針對不同的瀏覽器環(huán)境嵌入不同的源文件。相信隨著HTML5的發(fā)展，HTML5對不同編/解碼器的支持程度會(huì)越來越高，最終支持任何格式的視頻文件。

2.2瀏覽器支持特性檢測

video和audio元素是HTML5的新元素，它們的可用性被有意地設(shè)計(jì)為不需要任何腳本來進(jìn)行檢測。你可以設(shè)置多個(gè)源文件，支持HTML5新特性的瀏覽器會(huì)自動(dòng)選擇一個(gè)它所支持的視頻格式來進(jìn)行播放，而不支持HTML5新特性的瀏覽器(目前除了IE8及之前的版本，其余都支持HTML5)會(huì)完全忽略掉這兩個(gè)元素。

根據(jù)這一特點(diǎn)，我們在一般頁面制作中只需要在video或audio元素中寫入提示信息即可。向頁面中插入視頻和音頻的完整代碼如下：

如果支持HTML5的瀏覽器，如Chrome則會(huì)顯示如圖2-2所示的內(nèi)容。

圖2-2支持HTML5瀏覽器顯示audio及video元素

如果不支持HTML5的瀏覽器，如IE8則會(huì)顯示如圖2-3所示的內(nèi)容。

圖2-3不支持HTML5瀏覽器顯示audio及video元素

但是，如果你想要任何頁面都能正確打開所制作的視頻播放頁面或者你需要對視頻做更多的操作，就需要使用JavaScript。檢測瀏覽器是否支持video和audio元素，我們可以用以下JavaScript函數(shù)來進(jìn)行。

檢測頁面是否支持video的代碼如下：

如果瀏覽器支持video及audio元素，則被創(chuàng)建的元素對應(yīng)的DOM對象會(huì)有一個(gè)名為canPlayType()的方法，反之，該對象只會(huì)擁有一些所有元素都具有的公共屬性。我們先動(dòng)態(tài)創(chuàng)建一個(gè)需要檢測的對象，檢測canPlayType()方法是否存在，再通過“!!”運(yùn)算符將結(jié)果轉(zhuǎn)換成bool值，就可以檢測出元素是否被支持。

如果檢測到瀏覽器不支持video或audio元素，那么我們可以使用JavaScript向頁面嵌入媒體標(biāo)簽來引入想要播放的視頻。雖然同樣可以用腳本控制媒體，但是使用的是諸如Flash等其他播放技術(shù)。

2.3視頻、音頻的腳本控制

HTML5DOM為audio和video元素提供了方法、屬性和事件。這些方法、屬性和事件允許我們使用JavaScript來操作audio和video元素，開發(fā)人員可以基于這些方法、屬性和事件自行開發(fā)媒體播放用戶界面，制作屬于自己的視頻或音頻播放器。列舉一些常用的方法和屬性如表2-1～表2-4所示。

2.4HTML5中的音頻

2.4.1audio元素的基本操作在下面的代碼中，我們創(chuàng)建一個(gè)頁面，頁面中有一個(gè)播放器，其中加載了一首歌曲，點(diǎn)擊播放按鈕就能播放歌曲。歌曲播放頁面的完整代碼如下：

這段代碼中，在頁面中嵌入了一個(gè)名為“audio.mp3”的音頻文件，它和HTML文檔在同一個(gè)路徑下。在Chrome瀏覽器中打開的效果如圖2-4所示，在圖中可以看到一個(gè)音頻播放器，它有播放/暫停按鈕、播放時(shí)間/總播放時(shí)間、播放進(jìn)度條、聲音控制滑動(dòng)條及更多操作按鈕(展開后有一個(gè)下載按鈕，有些瀏覽器會(huì)直接顯示為下載按鈕)。這是HTML5默認(rèn)音頻播放器，支持audio元素的不同瀏覽器顯示的外觀有區(qū)別，但功能基本一致。

圖2-4簡單音頻播放頁面

在上面的代碼中，向頁面中嵌入音頻的代碼為：

代碼中，src屬性用于告訴瀏覽器播放的聲音的數(shù)據(jù)源位置；controls屬性告訴瀏覽器顯示用戶控件，如果不設(shè)置顯示用戶控件，則頁面上將不會(huì)顯示播放器，當(dāng)然你也無法開始播放音樂，除非你設(shè)置音樂自動(dòng)播放；開始標(biāo)簽和結(jié)束標(biāo)簽中間的文字用于為不支持audio元素的瀏覽器提供替代顯示內(nèi)容，當(dāng)然，這些文字你也可以將它設(shè)置為Flash播放器等播放插件，或者直接給出播放源文件的鏈接地址。

<audio>標(biāo)簽有很多屬性，用于為音頻提供更多的設(shè)置，如表2-5所示。

例2-1制作一個(gè)帶有背景音樂的頁面。

帶有背景音樂頁面的完整代碼如下：

代碼非常簡單，思路也不難，背景音樂有幾個(gè)特點(diǎn)：

(1)打開頁面后，背景音樂會(huì)自動(dòng)播放；

(2)背景音樂不需要顯示音樂播放控制器；

(3)背景音樂應(yīng)該循環(huán)播放。

總結(jié)了背景音樂的特點(diǎn)后，我們就能很容易地為頁面添加背景音樂了。首先使用audio元素在頁面中嵌入一個(gè)音頻，使用autoplay屬性設(shè)置頁面加載完成后自動(dòng)播放歌曲；不加入controls屬性，頁面中則不會(huì)生成播放控制器；使用loop屬性設(shè)置音樂循環(huán)播放。

一般設(shè)置背景音樂的目的是給頁面渲染某種氛圍，但是大部分用戶對頁面背景音樂比較反感，這個(gè)時(shí)候可以考慮在頁面中添加一個(gè)按鈕來設(shè)置背景音樂的打開或關(guān)閉，利用按鈕或超鏈接關(guān)聯(lián)JavaScript來控制audio元素，在頁面body元素中添加以下代碼可加入背景音樂控制按鈕。在例2-1制作的頁面的audio元素后面添加如下代碼：

2.4.2使用source元素

前面我們已經(jīng)介紹過，音頻的格式有很多，而HTML5中的audio元素支持的音頻格式只有3種：OggVorbis(.ogg)、MP3(.mp3)、Wav(.wav)。因?yàn)樯婕皩＠麢?quán)和特許權(quán)使用費(fèi)等法律和財(cái)務(wù)問題，不同瀏覽器對視頻格式的支持是不同的。我們可以通過表2-6看到主流瀏覽器對音頻格式的支持情況。

由表2-6可以看到，沒有一種格式的音頻文件是所有主流瀏覽器所支持的，如果想要讓任何瀏覽器打開你的頁面都能播放音頻的話，至少需要在頁面中嵌入兩種不同格式的音頻文件。HTML5標(biāo)準(zhǔn)也考慮到了這個(gè)問題，可以為一個(gè)audio元素設(shè)置多個(gè)源文件，格式如下：

2.4.3瀏覽器支持音頻格式檢測

我們可以通過JavaScript檢測技術(shù)來檢測瀏覽器的音頻格式支持情況。我們先來看看下面這段測試瀏覽器是否支持.ogg類型的代碼。

在2.2瀏覽器支持特性檢測章節(jié)中，我們已經(jīng)了解了如何檢測瀏覽器是否支持audio元素，因此上面的代碼直接使用我們提供的isSupportAudio()方法來判斷瀏覽器是否支持audio元素，如果瀏覽器不支持audio元素，則肯定無法播放音頻，直接返回false。接下來使用createElement()方法創(chuàng)建一個(gè)audio元素，然后調(diào)用它的canPlayType()方法，將OggVorbis類型的參數(shù)傳入，測試audio能否播放.ogg格式的音頻文件。

●

probably：表示瀏覽器有充分的把握可以播放此格式。

●

maybe：表示瀏覽器有可能可以播放此格式。

●

空字符串：表示瀏覽器無法播放此格式。

因此，在使用我們提供的方法判斷能否播放某種格式的音頻時(shí)，應(yīng)該判斷返回值不為空則表示可以播放。如判斷能否播放.mp3格式文件：

2.5HTML5中的視頻

2.5.1video元素的基本操作在下面的代碼中，我們創(chuàng)建了一個(gè)頁面，頁面中有一個(gè)播放器，其中加載了一個(gè)視頻，點(diǎn)擊播放按鈕就能播放視頻。視頻播放頁面的完整代碼如下：

看到這段代碼是不是很熟悉？沒錯(cuò)，在頁面中嵌入視頻和嵌入音頻的代碼基本一樣，差別只是標(biāo)簽名和數(shù)據(jù)源的格式不同而已。在上面的代碼中，我們在頁面中嵌入了一個(gè)名為video.mp4的視頻，這是最近非常流行的一首歌曲的MV。Chrome瀏覽器打開的效果如圖2-5所示。

圖2-5視頻播放頁面

從圖2-5中可以看到，視頻播放器和音頻播放器一樣有播放/暫停按鈕、播放時(shí)間/總播放時(shí)間、播放進(jìn)度條、聲音控制滑動(dòng)條及更多操作(下載)等按鈕，另外還多了一個(gè)全屏模式按鈕和畫面。通過上面的圖片及分析代碼可以看到，視頻并沒有播放，而等待畫面是視頻的第一幀。

在上面的代碼中，向頁面中嵌入視頻的代碼為：

代碼與嵌入音頻相似，因此這里不再贅述。我們直接來看看video元素有哪些屬性吧。video屬性如表2-7所示。

與audio屬性進(jìn)行對比，video屬性多了3個(gè)：height、width和poster?？梢园l(fā)現(xiàn)，這3個(gè)屬性都是和畫面有關(guān)，其中需要注意的是：

●

對于視頻來說，同時(shí)設(shè)置height和width只能設(shè)置播放器的高度和寬度，并不會(huì)改變視頻畫面的長寬比。因此，我們一般只設(shè)置height和width中的一個(gè)即可。

●

請記住每次在頁面嵌入視頻時(shí)都要設(shè)置height或width，否則頁面加載完成時(shí)視頻播放器只會(huì)默認(rèn)大小，等加載了視頻后視頻播放器會(huì)擴(kuò)大，將有一個(gè)從小到大的閃現(xiàn)變化，且視頻的大小會(huì)根據(jù)視頻分辨率發(fā)生變化，不利于頁面布局。

●

poster與autoplay屬性一般不同時(shí)出現(xiàn)，因?yàn)樵O(shè)置視頻自動(dòng)播放時(shí)，視頻的封面圖片會(huì)一閃而過，就失去了設(shè)置它的意義。poster與preload="meta"屬性設(shè)置一般同時(shí)出現(xiàn)，這樣可以為網(wǎng)頁用戶節(jié)省流量，提高網(wǎng)頁打開速度。

2.5.2使用source元素

和audio元素相似，目前video元素支持的視頻格式也是3種：OggVorbis(.ogg)、MPEG-4(.mp4)、WebM(.webm)。各主流瀏覽器對視頻格式的支持如表2-8所示。

通過表2-8可以看到，除了Chrome瀏覽器支持所有的視頻格式外，其他主流瀏覽器都只支持