Web前端開發(fā)第6章：多媒體1本章主要內容多媒體基礎HTML5音頻與視頻播放控制解決兼容性問題字幕案例：使用播放器插件實現視頻播放21.多媒體基礎媒體（Media）是人與人之間實現信息交流的中介，簡單地說，就是信息的載體，也稱為媒介。多媒體（Multimedia）就是多重媒體的意思，可以理解為直接作用于人感官的文字、圖形、圖像、動畫、聲音和視頻等各種媒體的統(tǒng)稱，即多種信息載體的表現形式和傳遞方式。Web上使用的多媒體技術，就是利用計算機把文字、圖形、影像、動畫、聲音及視頻等媒體信息都數字化，并將其整合在一定的交互式界面上，使計算機具有交互展示不同媒體形態(tài)的能力。31.1什么是多媒體1.多媒體基礎音頻編碼：將聲音調制成模擬信號，通過抽樣、量化、編碼三個步驟再經算法的方式將連續(xù)變化的模擬信號轉換為數字編碼。音頻解碼：將已經編碼好的音頻還原成連續(xù)變化的模擬信號，并給揚聲器傳遞聲音信號。41.2音頻編碼與音頻格式1.多媒體基礎編解碼器包括有損和無損兩種：無損文件太大，不適合在Web中進行播放。有損編解碼器在編碼的過程中會丟失一些原來的音頻信息。如果希望編碼后的音頻能夠清晰，需要有良好的音頻源、優(yōu)秀的編碼算法、高性能的編碼軟件和恰當的編碼參數。常見的音頻格式：CD、WAVE、AIFF、AU、MPEG、MP3、MPEG-4、MIDI、RealAudio、VQF、OggVorbis、AMR、WMA等。51.2音頻編碼與音頻格式1.多媒體基礎視頻編碼：通過特定的壓縮算法，將某個視頻的視頻容器轉換成另一個視頻容器的方式。視頻解碼：獲取視頻容器中的視頻、音頻等文件并播放的過程。61.3視頻編碼與視頻格式1.多媒體基礎視頻播放器（解碼器）的工作過程：解析容器格式以找出可以使用的視頻和音頻軌道，并分析它們的存儲結構，以便接下來的解碼工作。對視頻流解碼，并在屏幕上顯示一幅幅的圖像。對音頻流解碼，同時給揚聲器傳輸聲音信號。常見的視頻格式：AVI、MPEG、MOV、ASF、WMV、NAVI、RMVB、3GP、REALVIDEO、FLV、MKV、F4V、RMVB、WebM等。71.3視頻編碼與視頻格式1.多媒體基礎81.4在Web上能夠使用的音頻和視頻格式91.多媒體基礎101.5如何在Web上播放視頻在HTML5出現之前，向網頁中嵌入視頻是一件非常麻煩的事，需要引入Flash并且只能使用<object>和<embed>元素來進行。這樣的嵌入方式的缺點是：給Web前端開發(fā)者的開發(fā)帶來了一定的困難。使得用戶在進行視頻播放的時候必須安裝Flash的瀏覽器插件才可以播放視頻，不方便用戶的使用。11現場演示：案例6-01：在HTML4頁面中播放視頻文件2.HTML5音頻與視頻122.1Audio元素Web前端開發(fā)者可以通過audio元素播放聲音文件或音頻流。audio元素支持三種音頻格式：OggMP3WAVWeb前端開發(fā)者可以通過<source>元素來為同一個音頻指定多個源，供不同的瀏覽器來選擇適合自己的播放源。2.HTML5音頻與視頻132.1Audio元素

Ogg格式音頻在瀏覽器中的支持情況2.HTML5音頻與視頻142.1Audio元素

WAV格式音頻在瀏覽器中的支持情況2.HTML5音頻與視頻152.1Audio元素

MP3格式音頻在瀏覽器中的支持情況2.HTML5音頻與視頻162.2Video元素HTML5也提供了一系列通過video元素來進行視頻的標準方法。video元素支持三種視頻格式：Ogg：帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。MPEG4：帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件WebM：帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。Web前端開發(fā)者可以通過<source>元素來為同一個視頻指定多個源，供不同的瀏覽器來選擇適合自己的播放源。2.HTML5音頻與視頻172.2Video元素

Ogg格式音頻在瀏覽器中的支持情況2.HTML5音頻與視頻182.2Video元素

MPG4格式音頻在瀏覽器中的支持情況2.HTML5音頻與視頻192.2Video元素

WEBM格式音頻在瀏覽器中的支持情況2.HTML5音頻與視頻202.3Audio和Video的屬性audio和video元素的元素屬性大致相同：src：指定媒體數據的URL地址，即播放視頻或音頻文件的URL地址。preload：表明視頻或音頻文件是否需要進行預加載。none：表示不進行預先加載。metadata：表示只預先加載媒體的元數據，主要包括媒體字節(jié)數、第一幀、播放列表、持續(xù)時間等信息。auto：表示預加載全部視頻或音頻，該值是默認值。2.HTML5音頻與視頻212.3Audio和Video的屬性audio和video元素的元素屬性大致相同：poster：video元素的獨有屬性，用來在視頻不可用時，向用戶展示一張?zhí)娲鷪D片，從而避免視頻不可用時，頁面出現一片空白。loop：指定是否循環(huán)播放視頻或音頻。controls：指定是否為視頻或音頻添加瀏覽器自帶的播放控制條。2.HTML5音頻與視頻222.3Audio和Video的屬性audio和video元素的元素屬性大致相同：width和height：video元素的獨有屬性，指定視頻的寬度和高度。error：在讀取、使用媒體數據的過程中，出現錯誤時，error屬性將返回一個MediaError對象，該對象通過code的方式將錯誤狀態(tài)提供出來。1（MEDIA_ERR_ABORTED）：數據在下載中因用戶操作的原因而被中止。2（MEDIA_ERR_NETWORK）：確認媒體資源可用，但是在下載時出現網絡錯誤，媒體數據的下載過程被中止。3（MEDIA_ERR_DECODE）：確認媒體資源可用，但是解碼時發(fā)生錯誤。4（MEDIA_ERR_SRC_NOT_SUPPORTER）：媒體格式不被支持。23現場演示：案例6-02：讀取錯誤狀態(tài)2.HTML5音頻與視頻242.3Audio和Video的屬性audio和video元素的元素屬性大致相同：networkState：媒體數據在加載過程中讀取當前網絡狀態(tài)。0（NETWORK_EMPTY）：初始狀態(tài)。1（NETWORK_IDLE）：瀏覽器已經選擇好用什么編碼格式來播放媒體，但尚未建立網絡連接。2（NETWORK_LOADING）：媒體數據加載中。3（NETWORK_NO_SOURCE）：沒有支持的編碼格式，不進行加載。currentSrc：讀取正在播放中的媒體數據的URL地址。buffered：返回一個對象，該對象實現TimeRange接口，以確認瀏覽器是否已緩存媒體數據，屬性值為只讀屬性。2.HTML5音頻與視頻252.3Audio和Video的屬性audio和video元素的元素屬性大致相同：readyState：返回媒體當前播放位置的就緒狀態(tài)，其為只讀屬性。0（HAVE_NOTHING）：沒有獲得任何媒體的信息，當前沒有播放數據。1（HAVE_METADATA）：已經獲得到足夠的媒體信息，但是當前播放位置沒有有效的媒體數據，暫時不能夠播放。2（HAVE_CURRENT_DATA）：當前播放位置已經有數據可以播放，但沒有獲取到可以讓播放器前進的數據。3（HAVE_FUTURE_DATA）：當前播放位置已經有數據可以播放，而且也獲取到了可以讓播放器前進的數據。4（HAVE_ENOUGH_DATA）：當前播放位置已經有數據可以播放，下一幀數據已經獲得，且瀏覽器確認媒體數據以某一種速度進行加載，可以保證有足夠的后續(xù)數據進行播放。2.HTML5音頻與視頻262.3Audio和Video的屬性audio和video元素的元素屬性大致相同：seeking和seekableseeking屬性：返回布爾值，表示瀏覽器是否正在請求某一特定播放位置的數據，true表示瀏覽器正在請求數據；false表示瀏覽器已經停止請求。seekable屬性：返回TimeRange對象，表示請求到的數據的時間范圍。currentTime、startTime和durationcurrentTime屬性：讀取媒體的當前播放位置，通過修改該屬性值可以修改當前播放位置。startTime屬性：讀取媒體播放的開始時間，通常為0。duration屬性來讀取媒體文件總的播放時間。2.HTML5音頻與視頻272.3Audio和Video的屬性audio和video元素的元素屬性大致相同：played、paused和endedplayed屬性：返回一個TimeRange對象，讀取媒體文件已經播放部分的時間段。paused屬性：返回一個布爾值，表示是否處于暫停播放狀態(tài)。ended屬性：返回一個布爾值，表示是否已經播放完畢。efaultPlaybackRate和playbackRatedefaultPlaybackRate屬性：讀取或修改媒體默認的播放速率。playbackRate屬性：讀取或修改媒體當前的播放速率。2.HTML5音頻與視頻282.3Audio和Video的屬性audio和video元素的元素屬性大致相同：volume和mutedvolume屬性：讀取或修改媒體播放的音量，范圍為0到1。muted屬性：讀取或修改媒體的靜音狀態(tài)，該屬性值為布爾值。autoplay：設置或返回音視頻是否在加載后即開始播放，屬性值為true或false。2.HTML5音頻與視頻292.4Audio和Video的方法video元素和audio元素具有四種方法：play：使用該方法來播放媒體，自動將元素的paused值變?yōu)閒alse。pause：使用該方法來暫停播放，自動將元素的paused值變?yōu)閠rue。load：使用load方法來重新載入媒體進行播放。canPlayType：使用該方法來測試瀏覽器是否支持指定的媒體類型。空字符串：表示瀏覽器不支持此種媒體類型。maybe：表示瀏覽器可能支持此種媒體類型。probably：表示瀏覽器確定支持此種媒體類型。2.HTML5音頻與視頻302.5Audio和Video的事件事件處理方式監(jiān)聽：使用video或audio元素的addEventListener方法來監(jiān)聽事件發(fā)生。videoElement：表示頁面上的video或audio元素。type：事件名稱。listener：表示綁定的函數。useCapture：一個布爾值，表示該事件的響應順序。使用JavaScript腳本中的獲取事件句柄。2.HTML5音頻與視頻312.5Audio和Video的事件事件322.HTML5音頻與視頻332.6案例：在網頁上使用背景音樂簡介使用HTML5<audio>元素實現簡單的背景音樂播放，頁面被打開后直接加載音頻文件，音頻文件加載完成后播放，并且可以循環(huán)播放音樂。34現場演示：案例6-03：在網頁上使用背景音樂2.HTML5音頻與視頻352.7案例：在網頁上播放視頻簡介使用HTML5<video>元素實現簡單的視頻播放功能。36現場演示：案例6-04：在網頁上播放視頻3.播放控制373.1預加載媒體文件預加載媒體文件是播放器中很重要的一項功能，預先將媒體文件加載，可節(jié)省等待的時間，提高用戶體驗。HTML5實現預加載功能十分簡單，只需添加preload屬性并設置其屬性值即可。3.播放控制383.2視頻封面圖<video>中提供了poster屬性，可以為視頻播放器添加封面圖。poster屬性使用十分簡單，只需要在<video>標簽中加入poster屬性并指定封面圖路徑即可。3.播放控制393.3自動播放video元素聲明了autoplay屬性，頁面加載完成后，視頻馬上會被自動播放。video元素增加了兩個事件處理函數：當視頻加載完畢，準備開始播放的時候，會觸發(fā)oncanplay函數來執(zhí)行預設的動作。當視頻播放完成后，會觸發(fā)onended函數以停止幀的創(chuàng)建。3.播放控制403.4循環(huán)播放在video元素中添加loop屬性即可實現視頻的循環(huán)播放。3.播放控制413.5添加變量進行播放控制前，需要設置一些有助于調整實例的變量：speed是視頻播放速度，默認為1。volume為視頻音量，默認為1。muted設置靜音狀態(tài)，默認為不靜音。3.播放控制423.6播放除了<video>元素中自帶的控制條之外，還可以使用<video>的方法、屬性和事件來自定義控制條，其步驟為:清除<video>默認的播放控制條。使用CSS先定義按鈕的樣式。向頁面中添加播放按鈕元素。添加一個用于展示播放器狀態(tài)的div元素。添加<video>的播放函數videoPlay()。將播放函數與播放按鈕綁定，點擊播放按鈕后觸發(fā)播放事件。3.播放控制433.7暫停暫停操作是基于<video>的pasue事件開發(fā)的。添加暫停操作的具體步驟和播放按鈕的制作相類似。3.播放控制443.8快放、慢放、慢動作<video>中可以通過playbackRate獲取或設置video播放速度，可以通過此屬性進行快放、慢放、慢動作的播放控制。3.播放控制453.9快進、快退<video>中的currentTime屬性可以獲取或設置視頻中當前的播放位置，其獲取的時間以秒為單位。3.播放控制463.10進度拖動進度條是視頻播放是常用的功能，不僅顯示視頻播放的進度，還可以直接控制視頻的播放進度。進度條的實現是基于currentTime屬性。3.播放控制473.11音量控制在進行視頻播放時，會經常的根據需要調整音量，可增大音量、降低音量和設置靜音。<video>的屬性muted可以設置是否靜音。<video>的volume屬性用于設置視頻的音量。3.播放控制483.12全屏播放全屏播放是視頻播放中很重要的一個功能，其實現過程如下：設置全屏播放時的樣式。添加全屏播放控制按鈕。添加反射調用函數。添加全屏函數launchFullscreen()。添加退出全屏函數exitFullscreen()。點擊全屏按鈕后，執(zhí)行全屏函數，將播放器全屏。3.播放控制493.13播放器容錯處理<video>元素中提供了表示視頻錯誤狀態(tài)的error屬性，根據此屬性進行播放器的容錯處理。50現場演示：案例6-05：HTML5播放器-播放控制4.解決兼容性問題514.1瀏覽器對多媒體的兼容性支持HTML5的Video和Audio元素具有通用、集成和可視化的播放控制API，極大的方便了用戶和開發(fā)人員。并不是所有的瀏覽器都支持該兩種元素，又由于解碼方式不同，不同瀏覽器對其元素的媒體格式支持也不同。查看瀏覽器對元素的支持情況，主要有以下兩種方法：可以通過網站查看自己瀏覽器對video詳細支持情況。以使用動態(tài)腳本的方式創(chuàng)建并檢測特定函數是否存在。52現場演示：案例6-06：使用Video和Audio的備選內容4.解決兼容性問題534.2使用多媒體格式提升兼容性source元素為<video>和<audio>定義媒介資源，允許規(guī)定可替換的視頻/音頻文件供瀏覽器根據自身對媒體類型或者編解碼器的支持進行選擇。<source>元素的屬性：src：指定視頻源的URL地址。type：指定視頻源的類型。media：指定視頻的預期媒體類型。54現場演示：案例6-07：使用多媒體元素提升兼容性4.解決兼容性問題554.3使用Flash提升兼容性使用多種媒體格式提升兼容性只能提升支持video和audio元素的瀏覽器的兼容性，如果瀏覽器不支持該元素，就需要使用Flash代替video和audio元素播放多媒體。利用腳本檢測瀏覽器對video的支持情況，如果支持的話，使用video播放視頻，不支持的話引入Flash播放視頻。56現場演示：案例6-08：使用Flash提升兼容性5.字幕575.1標記時間的文本軌道網絡視頻文本軌道（簡稱為WebVTT）是用于標記文本軌道的文件格式。它與HTML5的<track>元素相結合，可給音頻、視頻等媒體資源添加字幕、標題和其他描述信息，并同步顯示。5.字幕585.1標記時間的文本軌道文件內容WebVTT文件是一個簡單的純文本文件，里面包含了以下幾種類型的視頻信息：字幕：關于對話的轉譯或者翻譯。標題：類似于標題，但是還包括音響效果和其他音頻信息。說明：預期為一個單獨的文本文件，通過屏幕閱讀器描述視頻。章節(jié)：旨在幫助用戶瀏覽整個視頻。元數據：默認不打算展示給用戶的、和視頻有關的信息和內容。5.字幕595.1標記時間的文本軌道文件格式WebVTT文件是一個以UTF-8為編碼，以.vtt為文件擴展名。WebVTT文件的頭部按如下順序定義：可選的字節(jié)順序標記（BOM）。字符串WEBVTT。一個空格（Space）或制表符（Tab），后面接任意非回車換行的元素。兩個或兩個以上的“WEBVTT行結束符”：回車\r，換行\(zhòng)n，或者同時回車換行\(zhòng)r\n。5.字幕605.1標記時間的文本軌道WebVTT標記WebVTT文件可以包含一個或多個“WebVTTCues”,各個之間用兩個或多個Web