HTML5多媒體新增特性

截止至今，多媒體內容在大多數情況下都是通過第三方插件或者集成在web瀏覽器上的應用程序放到網頁上的。此類插件包括realplayer、silverlight和quicktime等。目前最流行的方法是通過adobe的Flashplayer插件將視頻和音頻嵌入到網頁中。

在HTML4之前的版本中多媒體元素所用的代碼復雜冗長而且需要第三方插件，HTML5中引入的vedio和audio元素解決了這個問題。HTML5的用戶不需要下載第三方插件來觀看網頁中的多媒體元素，并且視頻和音頻播放器更容易通過腳本訪問。

雖然HTML5多媒體支持在理論上是非常優秀的，但是實際操作中并沒有那么簡單。需要考慮多媒體新元素、瀏覽器以及視頻音頻的解碼等眾多元素。

HTML5中創建視頻

vedio元素的屬性

HTML5規定了一中通過vedio元素來包含視頻的標準方法，其中不同的屬性表示視頻的不同播放特性

vedio屬性如下：

autoplay：當前網頁完成載入后自動播放

controls：向用戶顯示控件，比如播放按鈕、停止按鈕等

loop：視頻結束時重新開始播放

perload：是否在頁面加載完成后載入視頻，如果使用了autoplay，則忽略該屬性none、metadate和auto，默認值為auto

src：所播放視頻的URL地址

buffered：返回一個實現TimeRanges接口的對象，以確定瀏覽器是否已緩沖媒體數據

currentTime：返回媒體文件的當前播放時I安，也可以修改該時間屬性

startTime：返回多媒體開始播放的時間

duration：返回多媒體元素總體播放時間

played：獲得多媒體文件以播放完成的時間段

paused：返回當前播放的文件是否處于暫停狀態

ended：放回當前播放文件是否結束

playbackRate：返回當前正播放的媒體文件的速度頻率

volume：媒體元素播放音量

muted：是否設置為靜音

height：設置視頻播放器的高度

width：設置視頻播放器的寬度

poster：用于指定一張圖片，該圖片在當前視頻數據無效時顯示，視頻數據無效可能是視頻正在加載，也可能是視頻地址錯誤

networkState：返回視頻文件的網絡狀態

readyState：返回媒體當前播放位置的就緒狀態

error：只讀屬性。在多媒體元素加載或讀取文件過程中，如果出現錯誤，將觸發無元素的error事件。通過元素的error屬性返回當前的錯誤值

defaultPlaybackRate：返回頁面媒體元素默認的文件播放速度頻率，即默認播放速率。一般情況下該屬性值是1

vedio元素的方法

HTML5中vedio元素常用方法有三個，方法具體說明如下：

paly()：播放視頻，會將paused的值強行設為false

pause()：暫停視頻，會將paused的值強行設為true

load()：重新載入視頻，會將playbackRate的值強行設為defaultPlayBackRate的值，并且將error的值設為null

vedio元素的事件

媒介事件是指視頻、圖像以及音頻等媒介觸發的事件，適用于所有HTML5元素。不過在沒接元素audio、embed、img、images和vedio最為常用

vedio元素常用事件如下：

loadstart：瀏覽器開始請求媒介媒介時運行運行腳本

progress：瀏覽器正在獲取媒介數據時運行腳本

suspend：瀏覽器已經獲取媒介數據，但在去取回整個媒介文件之前停止時運行腳本

about：瀏覽器發生中止事件時運行腳本

error：獲取媒介出錯，有錯誤發生時，才發送這個事件。另外還有一個error屬性

emptied：媒介資源元素突然為空時(網絡錯誤、加載錯誤等)運行腳本

stalled：瀏覽器獲取媒介數據過程中(延遲0)存在時運行腳本

play：媒介數據即將開始播放時運行腳本

pause：媒介數據暫停播放時運行腳本

loadeddate：加載當前播放位置的媒體數據時運行腳本

loadedmetadata：加載完成媒體元素時，發送此事件，它將包括尺寸、時長和文件軌道等

playing：表明媒體已經開始播放

canplay：瀏覽器可以開始媒介播放，且估計以當前速率播放不能直接將媒介播放完(播放期間需要緩沖)

canplaythough：以瀏覽器當前速率直接播放可以直接播放完整個媒介資源(期間不需要緩沖)

seeking：當搜索操作開始時發送此事件(seeking屬性值為true)

seeked：當瀏覽器停止請求數據、搜索操作完成時，引發該事件(seeked屬性值為false)

timeupdate：當媒介改變其播放位置時運行腳本

volumechange：音量(volume屬性)改變或靜音(muted)時觸發事件

HTML5中創建音頻

audio元素的屬性

HTML5元素中的audio元素能夠控制播放聲音文件或音頻流。audio元素的屬性與vedio元素相比少了三個元素，它們分別是poster、height和width

audio元素的事件

audio元素的事件和vedio元素的事件是一樣的



總結

以上是生活随笔為你收集整理的html5 获取多媒体,基于HTML5的多媒体支持的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。