視頻和音頻
在最近幾年, 網(wǎng)絡(luò)上的視頻和音頻日益增多, 像是youtube, Viddler, Revver, MySpace, 還有其他很多可以讓任何一個(gè)人更容易的發(fā)布視頻和音頻的網(wǎng)站. 然而, 因?yàn)楫?dāng)前的HTML缺少必要的方法順利的插入并控制多媒體, 很多網(wǎng)站都依賴Flash來提供這樣的功能. 盡管可能可以用各種各樣的插件 (就像是QuickTime, Windows Media等等) 嵌入多媒體, 但是Flash是當(dāng)前唯一被廣泛應(yīng)用的, 提供了開發(fā)者們所渴望的跨瀏覽器兼容解決方案的插件.
對于各種基于Flash的媒體播放器, 創(chuàng)作者們對提供他們自己的用戶定制設(shè)計(jì)的界面, 那一般都允許用戶控制播放, 暫停, 停止, 查找或調(diào)整音量. 為瀏覽器提供插入視頻和音頻并提供DOM接口讓Script控制播放的功能要通過安裝本地程序支持.
視頻和音頻的新元素讓這個(gè)工作變得更加簡單. 這兩者之間的大部分API都是共享的, 唯一區(qū)別就關(guān)系到可視和不可視媒體之間的固有區(qū)別.
Opera和Webkit已經(jīng)放出了一個(gè)部分支持視頻元素的版本, 你可以到 experimental build of Opera ( http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/) 或者最新的 nightly build of WebKit ( http://nightly.webkit.org/) 去下載并試驗(yàn)一下這些示例. Opera支持Ogg Theora, Webkit支持所有QuickTime支持的媒體格式, 包括第三方的解碼器.
插入視頻最簡單的方法是使用video元素, 它會允許瀏覽器提供一個(gè)默認(rèn)的用戶界面, 其中controls屬性是一個(gè)boolean值屬性, 這個(gè)屬性是讓創(chuàng)作者決定用戶界面是否要顯示(默認(rèn)是不顯示).
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
可選擇的poster屬性可以指定在視頻播放前用來顯示的圖像. 盡管有一些視頻格式有它們特有的預(yù)覽圖格式, 就像是MPEG-4, 它提供了一個(gè)可以不依賴于視頻格式的可選擇方案.
用audio元素在頁面內(nèi)插入音頻文件也非常容易. audio和video元素的大部分屬性都是共用的, 但非常顯而易見的, audio元素沒有width, height以及poster屬性.
<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>
HMTL 5 提供了source 元素, 讓瀏覽器根據(jù)媒體類型或編碼器的支持來指定視頻或音頻文件. media屬性會根據(jù)設(shè)備的局限性和被指定的媒體的類型和編碼器來指定一個(gè)媒體選擇查詢. 當(dāng)在使用 source 元素時(shí), 上級元素( video或audio )的src屬性需要省略掉, 不然 source 元素中的src屬性會被忽略掉.
<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
為了那些需要給用戶界面更多一點(diǎn)控制來符合頁面的總設(shè)計(jì)的創(chuàng)作者以方便, 廣泛的API提供了一些方法和事件讓scripts來控制媒體文件. 最簡單的方法就是用 play(), pause(), 然后可以通過設(shè)置 currentTime 來進(jìn)行循環(huán). 接下去的例子會解釋怎么用.
<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;"><< Rewind</button>
還有很多這里沒有討論到的屬性以及API可以被用到視頻音頻元素. 如果想知道更多, 你可以參考 current draft specification (http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video).

最新評論