第8章HTML5媒體API主講人：XX老師本章學習目標理解音頻與視頻的概念；理解HTML5音頻與視頻的作用；熟悉HTML5音頻和視頻支持的媒體文件格式；掌握檢測瀏覽器是否支持HTML5媒體的方法；掌握HTML5中<audio>和<video>標簽的常見用法；目錄8.1HTML5媒體API概述8.2主流瀏覽器支持情況一覽8.3HTML5音頻的應用8.4HTML5視頻的應用8.5HTML5媒體API其他通用功能8.1.1HTML5音頻和視頻8.1.2HTML5媒體支持的格式8.1HTML5媒體API概述8.1.1HTML5音頻和視頻在HTML5之前，音頻和視頻通常是在瀏覽器上使用插件進行播放的，比如使用Flash播放器。但是這些插件不是所有瀏覽器都可以支持的，例如蘋果公司的iOS系統(tǒng)、MacOS系統(tǒng)等使用的主流瀏覽器為Safari瀏覽器，該瀏覽器就無法支持flash插件。HTML5媒體API提供了一種用元素標簽來包含音頻和視頻的標準，可以做到在無需任何插件的情況下直接播放媒體文件，并通過一系列屬性規(guī)定媒體文件的來源、循環(huán)方式和是否自動播放等。8.1.2HTML5媒體支持的格式HTML5媒體支持的音頻/視頻文件格式主要有MP3、MPEG-4、Wav、Ogg和WebM。8.1.2HTML5媒體支持的格式MP3MP3全稱為MPEG-1AudioLayer3，是由動態(tài)圖像專家組（MovingPictureExpertsGroup，MPEG）制定的一套用于音頻的混合壓縮技術(shù)。其優(yōu)點是壓縮率高，可達到10:1-12:1左右，適用于網(wǎng)絡傳播。MPEG-4MPEG-4是一套用于音頻、視頻新的壓縮編碼標準，通常媒體文件的后綴名是.mp4。和MP3一樣，MPEG-4由動態(tài)圖像專家組（MPEG）制定的。MPEG-4于1998年11月被批準為正式標準，編號是ISO/IEC14496。8.1.2HTML5媒體支持的格式WavWav格式是一項微軟和IBM定制的音頻文件格式標準，用于在PC端存儲音頻流，通常該格式的媒體文件后綴名是.wav。Wav格式符合資源交換檔案標準（ResourceInterchangeFileFormat，RIFF）標準。該格式主要用在Windows系統(tǒng)上，屬于無損音樂格式，因此相對來說文件較大。8.1.2HTML5媒體支持的格式OggOgg是一種完全免費開放的媒體容器格式，由Xiph.Org組織進行維護，通常媒體文件的后綴名是.ogg。Ogg來源于游戲術(shù)語“ogging”，該術(shù)語來源于一款發(fā)布于1988年的免費開源網(wǎng)絡游戲Netrek，這也是最早的網(wǎng)絡團隊游戲之一。Ogg容器格式擁有對于高質(zhì)量多媒體的處理能力，包含一系列獨立的流媒體如視頻、音頻、元數(shù)據(jù)、文本等。在Ogg多媒體框架中包含由Theora格式提供的視頻層以及Vorbis格式和Opus格式提供的音頻層。8.1.2HTML5媒體支持的格式WebMWebM是由Google發(fā)行的一種完全免費開放的視頻文件格式，通常媒體文件的后綴名為.webm。WebM格式是基于Matroska容器（常見為后綴名為.mkv格式的文件）改造開發(fā)的新標準。WebM最初支持VP8視頻和Vorbis音頻解碼器，2013年更新后支持VP9視頻和Opus音頻解碼器。WebM標準是于2010年GoogleI/O大會上發(fā)布，支持Firefox、Opera和Chrome瀏覽器。8.2.1對HTML5音頻的支持情況8.2.2對HTML5視頻的支持情況8.2主流瀏覽器支持情況一覽8.2.1對HTML5音頻的支持情況目前HTML5支持的常用音頻格式有三種：MP3格式：媒體文件的后綴名為.mp3；Ogg格式：媒體文件的后綴名為.ogg；Wav格式：媒體文件的后綴名為.wav。8.2.1對HTML5音頻的支持情況音頻格式EdgeFirefoxChromeSafariOperaMP3支持不支持支持支持不支持Ogg支持支持支持不支持支持Wav支持支持不支持支持支持注：在開發(fā)過程中，如果無法明確用戶使用的瀏覽器類型則需要起碼準備兩種音頻格式進行備選。8.2.2對HTML5視頻的支持情況目前HTML5支持的常用視頻格式有三種：MPEG4格式：帶有H.264視頻編碼和AAC音頻編碼，媒體文件的后綴名為.mp4；Ogg格式：帶有Theora視頻編碼和Vorbis音頻編碼，媒體文件的后綴名為.ogg；WebM格式：帶有VP8視頻編碼和Vorbis音頻編碼，媒體文件的后綴名為.webm。8.2.2對HTML5視頻的支持情況注：在開發(fā)過程中，如果無法明確用戶使用的瀏覽器類型則需要起碼準備兩種視頻格式進行備選。視頻格式EdgeFirefoxChromeSafariOperaMPEG4支持支持支持支持支持Ogg不支持支持支持不支持支持WebM不支持支持支持不支持支持8.3.1HTML5音頻的基本格式8.3.2檢查瀏覽器支持情況8.3.3音頻來源多樣性8.3.4自定義音頻控制8.3HTML5音頻的應用8.3.1HTML5音頻的基本格式HTML5提供了一種使用<audio>和</audio>標簽來顯示音頻的標準方法。8.3.1HTML5音頻的基本格式HTML5音頻所使用的<audio>標簽的基本語法結(jié)構(gòu)如下：<audiosrc="音頻文件的URL"controls></audio>其中src屬性可以是音頻文件的URL地址或本地文件路徑；controls屬性用于添加音樂播放器的播放/暫停按鈕以及聲音大小調(diào)節(jié)的控件，標準寫法為controls=”controls”，也可以直接簡寫成controls，作用完全相同。8.3.1HTML5音頻的基本格式例如：<audiosrc="song.mp3"controls></audio>8.3.1HTML5音頻的基本格式【例8-1】音頻標簽<audio>的簡單應用

8.3.1HTML5音頻的基本格式HTML5音頻API的<audio>標簽有一系列屬性用于對音頻文件的播放進行設置，如表8-3所示。8.3.2檢查瀏覽器支持情況使用<audio>標簽檢測使用JavaScript檢測8.3.2檢查瀏覽器支持情況1.使用<audio>標簽檢測可以直接在<audio>首尾標簽之間插入提示語句用于提示瀏覽器不支持的情況。在不支持<audio>標簽的瀏覽器中會直接顯示出該提示語句，若瀏覽器支持該標簽則不會顯示此提示語句。8.3.2檢查瀏覽器支持情況1.使用<audio>標簽檢測【例8-2】使用<audio>標簽檢測瀏覽器支持情況

8.3.2檢查瀏覽器支持情況2.使用JavaScript檢測除了直接使用<audio>標簽提示瀏覽器對HTML5音頻的支持情況外，還可以使用JavaScript語句檢測瀏覽器是否支持HTML5音頻。其原理是利用JavaScript的document.creatElement(‘標簽名稱’)語句動態(tài)創(chuàng)建<audio>標簽，然后檢測<audio>元素包含的canPlayType函數(shù)是否存在。8.3.2檢查瀏覽器支持情況2.使用JavaScript檢測varsupportAudio=!!document.creatElement(‘a(chǎn)udio’).canPlayType;前綴的雙感嘆號（！?。┯糜趯z測結(jié)果轉(zhuǎn)換為布爾值（boolean）類型，以此判斷<audio>元素是否可以被真的創(chuàng)建出來，如果返回值為true則說明當前瀏覽器支持HTML5音頻，否則說明當前瀏覽器不支持<audio>標簽。8.3.2檢查瀏覽器支持情況2.使用JavaScript檢測【例8-3】檢測瀏覽器對HTML5音頻的支持情況8.3.3音頻來源多樣性由于不同的瀏覽器對支持的音頻格式不一樣，可以在<audio>元素中使用<source>標簽指定多個音頻文件，為不同的瀏覽器提供可支持的編碼格式。瀏覽器會按照先后順序使用第一個可識別的格式。8.3.3音頻來源多樣性例如：<audiocontrols><sourcesrc="music/song.ogg"><sourcesrc="music/song.mp3">對不起，您的瀏覽器不支持HTML5音頻API。</audio>在本例中瀏覽器會先判斷音頻是否支持.ogg格式，如果支持就會直接播放song.ogg文件，否則會繼續(xù)判斷是否支持.mp3格式，支持則播放song.mp3。如果依次判斷下去沒有任何文件格式可以被執(zhí)行，則會返回給<audio>標簽一個錯誤事件。8.3.3音頻來源多樣性【例8-4】音頻來源的多樣性8.3.4自定義音頻控制如果不想在網(wǎng)頁上顯示<audio>標簽自帶的播放/暫停按鈕以及音量調(diào)節(jié)等控件（例如希望作為網(wǎng)頁的背景音樂），可以不添加其中的controls屬性，重新用JavaScript對音頻的播放進行控制。8.3.4自定義音頻控制【例8-5】自定義音頻控制按鈕8.4.1HTML5視頻的基本格式8.4.2檢查瀏覽器支持情況8.4.3視頻來源多樣性8.4.4自定義視頻控制8.4HTML5視頻的應用8.4.1HTML5視頻的基本格式HTML5提供了一種使用<video>和</video>標簽來顯示視頻的標準方法8.4.1HTML5視頻的基本格式HTML5視頻所使用的<video>標簽的基本語法結(jié)構(gòu)如下：<videosrc="視頻文件的URL"controls></video>其中src屬性可以是視頻文件的URL地址或本地文件路徑。controls屬性用于添加音樂播放器的播放和暫停按鈕以及聲音大小調(diào)節(jié)的控件。8.4.1HTML5視頻的基本格式例如：<videosrc="video/art.mp4"controls></video>上述代碼表示視頻來源為video目錄下的art.mp4視頻文件，并且顯示音樂播放器的播放、暫停按鈕以及聲音大小調(diào)節(jié)等控件。8.4.1HTML5視頻的基本格式【例8-6】視頻標簽<video>的簡單應用8.4.1HTML5視頻的基本格式8.4.2檢查瀏覽器支持情況1.使用<video>標簽檢測2.使用JavaScript檢測8.4.2檢查瀏覽器支持情況1.使用<video>標簽檢測和使用<audio>標簽檢查瀏覽器支持情況的原理一樣，也可以直接在<video>和</video>標簽之間插入提示語句用于檢查瀏覽器支持情況。在不支持<video>標簽的瀏覽器中會直接顯示該提示語句，若瀏覽器支持該標簽則不會顯示此提示語句。8.4.2檢查瀏覽器支持情況1.使用<video>標簽檢測【例8-7】使用<video>標簽檢測瀏覽器支持情況

8.4.2檢查瀏覽器支持情況2.使用JavaScript檢測和檢測瀏覽器是否支持HTML5音頻的原理類似，也可以使用同樣類型的JavaScript語句檢測瀏覽器是否支持HTML5視頻。用JavaScript的document.creatElement(‘標簽名稱’)語句動態(tài)創(chuàng)建<video>標簽，然后檢測<video>元素包含的canPlayType函數(shù)是否存在。8.4.2檢查瀏覽器支持情況2.使用JavaScript檢測代碼如下：varsupportVideo=!!document.creatElement(‘video’).canPlayType;前綴的雙感嘆號（?。。┯糜趯z測結(jié)果轉(zhuǎn)換為布爾值（boolean）類型，以此判斷<video>元素是否可以被創(chuàng)建出來，如果返回值為true則說明當前瀏覽器支持HTML5視頻，否則說明當前瀏覽器不支持<video>標簽。8.4.2檢查瀏覽器支持情況2.使用JavaScript檢測【例8-8】檢測瀏覽器對HTML5視頻的支持情況8.4.3視頻來源多樣性由于不同的瀏覽器對支持的視頻格式不一樣，可以在<video>元素中使用<source>標簽指定多個視頻文件，為不同的瀏覽器提供可支持的編碼格式。瀏覽器會按照先后順序使用第一個可識別的格式。8.4.3視頻來源多樣性例如：<videocontrols="controls"><sourcesrc="video/song.ogg"><sourcesrc="video/song.mp4">對不起，您的瀏覽器不支持HTML5視頻API。</video>8.4.3視頻來源多樣性如果能明確視頻文件所需視頻解碼器的值，也可以在<source>標簽的type屬性中指定，這樣可以幫助瀏覽器更有效率地做出正確的判斷。例如：<videocontrols="controls"><sourcesrc="video/song.ogg"type=’video/ogg;codec="dirac,speex"’><sourcesrc="video/song.mp4"type=’video/mp4;codecs="avc1.42E01E,mp4a.40.2"’>對不起，您的瀏覽器不支持HTML5視頻API。</video>8.4.3視頻來源多樣性【例8-9】視頻來源的多樣性8.4.4自定義視頻控制

如果不想使用<video>標簽自帶的播放/暫停按鈕等控件，同樣也可以禁用其中的controls屬性，用JavaScript對視頻的播放進行控制。

視頻播放時默認的畫面大小是視頻源文件的畫面尺寸，如果需要更改也可以為<video>標簽添加width（寬度）和height（高度）屬性放大或縮小視頻畫面。8.4.4自定義視頻控制【例8-10】自定義視頻控制按鈕8.4.4自定義視頻控制【例8-10】自定義視頻控制按鈕cont.8.5.1標記媒體播放時間范圍8.5.2跳轉(zhuǎn)媒體播放時間點8.5.3獲取媒體播放時間8.5.4終止媒體文件的下載8.5.5使用Flash播放器8.5HTML5媒體API其他通用功能8.5.1標記媒體播放時間范圍在為<audio>標簽或<video>標簽設置src屬性從而指定播放音頻或視頻來源時，可以加入一些額外的信息來指定需要播放的時間段。8.5.1標記媒體播放時間范圍具體語法格式如下：src="音頻或視頻的URL地址#t=[starttime][,endtime]"需要使用井號（#）標志分割前面的媒體文件來源URL和后面的額外信息。其中starttime指的是指定音頻或視頻的開始播放時間，如果省略不寫則默認開始時間是音頻或視頻的開頭；endtime指的是指定音頻或視頻的終止播放時間，如果省略不寫則默認終止時間是音頻或視頻的結(jié)束。8.5.1標記媒體播放時間范圍開始時間starttime和終止時間endtime均可以填入整數(shù)或浮點數(shù)類型的秒數(shù)，也可以寫成時:分:秒的格式。例如，表示指定的媒體文件從第8秒開始播放，到第25秒結(jié)束，相關(guān)代碼如下：src="video/art.mp4#t=8,25"8.5.1標記媒體播放時間范圍表示指定的媒體文件從第8.5秒開始播放，到第20秒結(jié)束，相關(guān)代碼如下：src="video/art.mp4#t=8.5,20"8.5.1標記媒體播放時間范圍表示指定的媒體文件從最開始播放，到第1小時50分鐘的時候結(jié)束，相關(guān)代碼如下：src="video/art.mp4#t=,01:50:00"8.5.1標記媒體播放時間范圍表示指定的媒體文件從第20秒開始播放，一直播放到最后結(jié)束，相關(guān)代碼如下：src="video/art.mp4#t=20"8.5.1標記媒體播放時間范圍【例8-11】指定媒體文件的播放時間8.5.2跳轉(zhuǎn)媒體播放時間點HTML5媒體API允許媒體內(nèi)容在播放過程中直接跳轉(zhuǎn)到指定的時間點，可以通過設置<audio>或<video>標簽的currentTime屬性值（單位：秒）來完成。8.5.2跳轉(zhuǎn)媒體播放時間點寫法如下：//獲取媒體元素對象varmediaFile=document.getElementById("media");

//設置currentTime屬性值，例如需要跳轉(zhuǎn)到第200秒。mediaFile.currentTime=200;8.5.2跳轉(zhuǎn)媒體播放時間點【例8-12】媒體文件播放時間點的跳轉(zhuǎn)8.5.3獲取媒體播放時間HTML5媒體API允許獲取媒體播放允許的開始時間與結(jié)束時間，需要使用<audio>或<video>標簽的seekable屬性。seekable屬性的start(index)方法可以用于獲取媒體播放的開始時間，end(index)方法用于獲取媒體播放的結(jié)束時間，其中index表示媒體對象的來源序號，默認只有一個的情況填數(shù)字0。這兩個方法的返回值均為時間單位秒。8.5.3獲取媒體播放時間獲取媒體的開始時間寫法如下：//獲取媒體元素對象varmediaFile=document.getElementById("media");

//獲取媒體播放的開始時間（單位：秒）mediaFile.seekable.start(0);8.5.3獲取媒體播放時間獲取媒體的結(jié)束時間寫法如下：//獲取媒體元素對象varmediaFile=document.getElementById("media");

//獲取媒體播放的結(jié)束時間（單位：秒）mediaFile.seekable.end(0);8.5.3獲取媒體播放時間HTML5媒體API同時也允許獲取媒體目前播放到的時間點，使用的是<audio>或<video>標簽的played屬性，該屬性中的end(index)方法可以獲取單位為秒的當前播放時間節(jié)點。獲取媒體當前播放的秒數(shù)寫法如下：//獲取媒體元素對象varmediaFile=document.getElementById("media");

//獲取媒體當前播放的秒數(shù)mediaFile.played.end(0);8.5.3獲取媒體播放時間【例8-13】獲取當前播放時間8.5.4終止媒體文件的下載