天天看點

《HTML5多媒體應用開發》——2.2 原生多媒體

本節書摘來自異步社群《html5多媒體應用開發》一書中的第2章,第2.2節,作者: 【愛】ian devlin 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

使用原生多媒體,對象不再嵌入到web文檔中,而是被浏覽器當作原生對象建構。這提供了以下直接的好處。

不再需要插件。

速度——任何浏覽器原生功能都比第三方附加軟體快。

浏覽器提供的原生控件。

自動内建鍵盤可通路性。

html5提供4個新的标示元素,幫助你實作浏覽器原生多媒體。下面我們來看看這些元素以及可能出現的屬性。

2.2.1 audio元素

audio元素允許你在web文檔中嵌入音頻檔案或者音頻流。下面這行簡短的代碼可以向你展示使用audio元素在你的web文檔中嵌入音頻檔案有多容易:

比以前簡單多了,不是嗎?

《HTML5多媒體應用開發》——2.2 原生多媒體
《HTML5多媒體應用開發》——2.2 原生多媒體

這行代碼示例通知浏覽器嵌入指定的音頻檔案,并使用浏覽器自己的多媒體控件。各種浏覽器都有不同的預設控件,是以音頻控件的外觀依賴于檢視者使用的浏覽器。如圖2.2~圖2.6所示,你可以看到這些控件的不同顯示效果。

《HTML5多媒體應用開發》——2.2 原生多媒體

從表2.1中你可以看到,audio元素可以使用許多不同的設定,其中一些屬性有許多設定。web文檔中的音頻聲明可能像下面這樣:

你将在第3章中學習到更多有關audio元素的内容,将會提供更多深入的使用示例以及表2.1中列出的大部分屬性的組合。

現在你已經簡單地了解了audio元素的屬性,我們接着看看video元素。

2.2.2 video元素

video元素允許你在web文檔中嵌入視訊内容,你同樣可以指定許多控制這一内容的屬性。許多屬性與audio元素中的相同,但是還有一些額外的屬性,如表2.2所示。

《HTML5多媒體應用開發》——2.2 原生多媒體
《HTML5多媒體應用開發》——2.2 原生多媒體

https://yqfile.alicdn.com/d3e3d79da85b6802bc50babdd24cc28dbbfc0128.png" >

crossorigin

crossorigin是最近加入到html5規範的,是以目前沒有實際的應用,沒有一個主流浏覽器支援它。它使用cors(跨域資源共享)規範,你可以在www.w3.org/tr/cors看到這個規範。

mediagroup

和crossorigin類似,mediagroup也是最近加入到html5規範的,在本書編寫時還沒有在任何主流浏覽器中實作。一旦得以實作,它對于可通路性是很有益的,因為它使在正常視訊旁邊播放同步的手語視訊之類的方案成為可能。

你可以看到,audio和video元素的許多屬性相同,在使用時當然非常友善,因為你隻需要記住一組屬性。

下面是一個使用video元素在web文檔中顯示一個帶有浏覽器控件的視訊的例子:

這個簡單的例子告知浏覽器,顯示一個包含snowy-tree.mp4視訊檔案,大小為300像素 × 176像素,帶有預設媒體控件的視訊播放器。

和音頻一樣,各種浏覽器顯示的控件和視訊是不同的。如圖2.7~圖2.11所示,你可以看到各種浏覽器中的視訊控件外觀。

《HTML5多媒體應用開發》——2.2 原生多媒體
《HTML5多媒體應用開發》——2.2 原生多媒體

https://yqfile.alicdn.com/5e08c8d707842f19d1ce23c9018c844c16f3444b.png" >

2.2.3 source元素

由于不同的浏覽器需求(在第3章和第4章中有更多相關的内容),通常要求為相同的audio和video元素指定不同的源。

正如前面所見,audio和video元素提供一個src屬性,用于放置指向音頻或者視訊源的url。但是該屬性隻允許一個源。那麼怎麼添加多個源呢?

這正是source元素發揮作用的地方。audio和video元素聲明中可以包含任何數量的source元素,通過這個元素你可以指定多個媒體源。

source元素可以包含如表2.3所示的屬性。

source元素允許你為特定的多媒體作品指定不同的源,下面是一個例子:

在這個例子中,兩個不同的音頻檔案格式可供浏覽器播放。浏覽器将播放它所了解的第一種格式,忽略不了解的任何格式。如果浏覽器無法找到能夠播放的格式,它将用文本“sorry, your browser doesn’t support the audio element(抱歉,你的浏覽器不支援這個音頻元素)”來通知使用者該浏覽器無法播放這段音頻。

浏覽器忽略不了解的内容的這個過程在提供跨浏覽器支援的多媒體解決方案時被證明非常有用。前面已經提到,不同的浏覽器支援不同的多媒體檔案格式,你在下兩章中可以更詳細地讀到。

《HTML5多媒體應用開發》——2.2 原生多媒體

2.2.4 track元素

track元素用于為媒體元素指定明确的外部定時文本軌道。該元素必需與一個audio或者video元素一起使用,因為它本身沒有任何意義。

這個元素主要用于為多媒體資源提供更多可通路性,因為它可以提供标題、描述、文本和字幕。這些内容都可以在浏覽器中與播放的媒體一起顯示。

在大部分情況下,通過track元素提供的資訊更适合于視訊媒體源。

和前面描述的其他元素類似,track元素可以使用許多屬性,如表2.4所示。

track元素可以用于指定媒體資源的全部文字記錄,例如,可以用于讓聽力有損傷的人們使用這些媒體。它還使你可以指定不同語言的多種字幕和描述,下面是一個例子:

這個例子為sayhello.mp4視訊指定兩個不同的檔案,分别用于英語和德語。

《HTML5多媒體應用開發》——2.2 原生多媒體

https://yqfile.alicdn.com/91a92316b93cdd2f3d54b55b1459054d6168731b.png" >

safari和internet explorer 9的怪癖

*我在本章前面部分提到,原生多媒體是最好的,最理想的是不需要第三方插件,我可能有些歪曲事實。并不是說原生多媒體不好,它确實是絕妙的。

但是,為了在safari和internet explorer 9中使用原生多媒體,apple要求使用者必須安裝其quicktime插件,而microsoft要求在系統上安裝其media player。

這些要求在某種程度上損害了原生多媒體的概念。我不知道為什麼蘋果公司和microsoft做出這樣的選擇,但這是它們的立場。*

繼續閱讀