視頻和音頻
在最近幾年, 網絡上的視頻和音頻日益增多, 像是youtube, Viddler, Revver, MySpace, 還有其他很多可以讓任何一個人更容易的發佈視頻和音頻的網站. 然而, 因爲當前的HTML缺少必要的方法順利的插入並控制多媒體, 很多網站都依賴Flash來提供這樣的功能. 儘管可能可以用各種各樣的插件 (就像是QuickTime, Windows Media等等) 嵌入多媒體, 但是Flash是當前唯一被廣泛應用的, 提供了開發者們所渴望的跨瀏覽器兼容解決方案的插件.
對於各種基於Flash的媒體播放器, 創作者們對提供他們自己的用戶定製設計的界面, 那一般都允許用戶控制播放, 暫停, 停止, 查找或調整音量. 爲瀏覽器提供插入視頻和音頻並提供DOM接口讓Script控制播放的功能要通過安裝本地程序支持.
視頻和音頻的新元素讓這個工作變得更加簡單. 這兩者之間的大部分API都是共享的, 唯一區別就關係到可視和不可視媒體之間的固有區別.
Opera和Webkit已經放出了一個部分支持視頻元素的版本, 你可以到 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/ ) 去下載並試驗一下這些示例. Opera支持Ogg Theora, Webkit支持所有QuickTime支持的媒體格式, 包括第三方的解碼器.
插入視頻最簡單的方法是使用video元素, 它會允許瀏覽器提供一個默認的用戶界面, 其中controls屬性是一個boolean值屬性, 這個屬性是讓創作者決定用戶界面是否要顯示(默認是不顯示).
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
可選擇的poster屬性可以指定在視頻播放前用來顯示的圖像. 儘管有一些視頻格式有它們特有的預覽圖格式, 就像是MPEG-4, 它提供了一個可以不依賴於視頻格式的可選擇方案.
用audio元素在頁面內插入音頻文件也非常容易. audio和video元素的大部分屬性都是共用的, 但非常顯而易見的, audio元素沒有width, height以及poster屬性.
<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>
HMTL 5 提供了source 元素, 讓瀏覽器根據媒體類型或編碼器的支持來指定視頻或音頻文件. media屬性會根據設備的侷限性和被指定的媒體的類型和編碼器來指定一個媒體選擇查詢. 當在使用 source 元素時, 上級元素( 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>
爲了那些需要給用戶界面更多一點控制來符合頁面的總設計的創作者以方便, 廣泛的API提供了一些方法和事件讓scripts來控制媒體文件. 最簡單的方法就是用 play(), pause(), 然後可以通過設置 currentTime 來進行循環. 接下去的例子會解釋怎麼用.
<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).