HTML5多媒體新增特性

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

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

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

HTML5中創(chuàng)建視頻

vedio元素的屬性

HTML5規(guī)定了一中通過(guò)vedio元素來(lái)包含視頻的標(biāo)準(zhǔn)方法，其中不同的屬性表示視頻的不同播放特性

vedio屬性如下：

autoplay：當(dāng)前網(wǎng)頁(yè)完成載入后自動(dòng)播放

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

loop：視頻結(jié)束時(shí)重新開(kāi)始播放

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

src：所播放視頻的URL地址

buffered：返回一個(gè)實(shí)現(xiàn)TimeRanges接口的對(duì)象，以確定瀏覽器是否已緩沖媒體數(shù)據(jù)

currentTime：返回媒體文件的當(dāng)前播放時(shí)I安，也可以修改該時(shí)間屬性

startTime：返回多媒體開(kāi)始播放的時(shí)間

duration：返回多媒體元素總體播放時(shí)間

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

paused：返回當(dāng)前播放的文件是否處于暫停狀態(tài)

ended：放回當(dāng)前播放文件是否結(jié)束

playbackRate：返回當(dāng)前正播放的媒體文件的速度頻率

volume：媒體元素播放音量

muted：是否設(shè)置為靜音

height：設(shè)置視頻播放器的高度

width：設(shè)置視頻播放器的寬度

poster：用于指定一張圖片，該圖片在當(dāng)前視頻數(shù)據(jù)無(wú)效時(shí)顯示，視頻數(shù)據(jù)無(wú)效可能是視頻正在加載，也可能是視頻地址錯(cuò)誤

networkState：返回視頻文件的網(wǎng)絡(luò)狀態(tài)

readyState：返回媒體當(dāng)前播放位置的就緒狀態(tài)

error：只讀屬性。在多媒體元素加載或讀取文件過(guò)程中，如果出現(xiàn)錯(cuò)誤，將觸發(fā)無(wú)元素的error事件。通過(guò)元素的error屬性返回當(dāng)前的錯(cuò)誤值

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

vedio元素的方法

HTML5中vedio元素常用方法有三個(gè)，方法具體說(shuō)明如下：

paly()：播放視頻，會(huì)將paused的值強(qiáng)行設(shè)為false

pause()：暫停視頻，會(huì)將paused的值強(qiáng)行設(shè)為true

load()：重新載入視頻，會(huì)將playbackRate的值強(qiáng)行設(shè)為defaultPlayBackRate的值，并且將error的值設(shè)為null

vedio元素的事件

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

vedio元素常用事件如下：

loadstart：瀏覽器開(kāi)始請(qǐng)求媒介媒介時(shí)運(yùn)行運(yùn)行腳本

progress：瀏覽器正在獲取媒介數(shù)據(jù)時(shí)運(yùn)行腳本

suspend：瀏覽器已經(jīng)獲取媒介數(shù)據(jù)，但在去取回整個(gè)媒介文件之前停止時(shí)運(yùn)行腳本

about：瀏覽器發(fā)生中止事件時(shí)運(yùn)行腳本

error：獲取媒介出錯(cuò)，有錯(cuò)誤發(fā)生時(shí)，才發(fā)送這個(gè)事件。另外還有一個(gè)error屬性

emptied：媒介資源元素突然為空時(shí)(網(wǎng)絡(luò)錯(cuò)誤、加載錯(cuò)誤等)運(yùn)行腳本

stalled：瀏覽器獲取媒介數(shù)據(jù)過(guò)程中(延遲0)存在時(shí)運(yùn)行腳本

play：媒介數(shù)據(jù)即將開(kāi)始播放時(shí)運(yùn)行腳本

pause：媒介數(shù)據(jù)暫停播放時(shí)運(yùn)行腳本

loadeddate：加載當(dāng)前播放位置的媒體數(shù)據(jù)時(shí)運(yùn)行腳本

loadedmetadata：加載完成媒體元素時(shí)，發(fā)送此事件，它將包括尺寸、時(shí)長(zhǎng)和文件軌道等

playing：表明媒體已經(jīng)開(kāi)始播放

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

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

seeking：當(dāng)搜索操作開(kāi)始時(shí)發(fā)送此事件(seeking屬性值為true)

seeked：當(dāng)瀏覽器停止請(qǐng)求數(shù)據(jù)、搜索操作完成時(shí)，引發(fā)該事件(seeked屬性值為false)

timeupdate：當(dāng)媒介改變其播放位置時(shí)運(yùn)行腳本

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

HTML5中創(chuàng)建音頻

audio元素的屬性

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

audio元素的事件

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



總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。