Html 5 新標籤之Media
趁著自己還有空閒的時間,仔細的重新回顧了一下html5
HTML5
HTML5,目前被廣泛使用中,對比前一個4.01版本,新加入了很多功能,其中就有很多新的標籤,給前端開發帶來了極大的便利。
HTML5 新特性
用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線儲存的更好的支援
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控制元件，比如 calendar、date、time、email、url、search
新標籤之視訊和音訊
HTML5中加入了video和audio的標籤,可以支援在html檔案中載入音視訊。
VIDEO元素支援的視訊格式:
Ogg = 帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案 (僅支援Firefox3.5+,Opera10.5+,Chrome5.0+)
MPEG4 = 帶有 H.264 視訊編碼和 AAC 音訊編碼的 MPEG 4 檔案 (僅支援IE9.0+,Chrome5.0+,Safari3.0+)
WebM = 帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 WebM 檔案 (僅支援Firefox4.0+,Opera10.6+,Chrome6.0+)
更多視訊格式內容
HTML5使用方法:
| 12345 |
<video width="320" height="240" |
視訊資源來自w3school,瀏覽器會找source列表中的視訊,並使用第一個格式適配的資源,如果兩種格式都不適配,則顯示文字內容。
controls屬性的設定為controls,可以顯示播放、暫停和音量控制元件
autoplay屬性設定值為autoplay,則視訊在就緒後馬上播放。
height屬性設定為200pixels表示視訊播放器的高度為200pixels;同理用width設定視訊播放器的寬度。
loop屬性設定為loop,則當媒介檔案完成播放後再次開始播放。
preload屬性設定為preload,則視訊在頁面載入時進行載入，並預備播放。如果使用 “autoplay”，則忽略該屬性。
src屬性中設定的是視訊資源的url。
使用DOM控制視訊元素
不僅可以通過視訊自帶的控制按鈕來控制視訊,還可以通過DOM來操控視訊
| 12345678910 | <button onclick="playPause()">播放/暫停</button><script type="text/javascript"> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); }</script> |
當點選按鈕的時候,視訊如果是停止的,會繼續播放,播放的會停止。
AUDIO元素的音訊格式及支援它的瀏覽器
audio 元素支援三種音訊格式：
Ogg Vorbis(Firefox 3.5, Opera 10.5, Chrome 3.0)
MP3(IE 9, Chrome 3.0, Safari 3.0)
Wav (Firefox 3.5, Opera 10.5, Safari 3.0)
AUDIO使用方式
| 12345 | <audio controls="controls"> <source src="/i/song.ogg" type="audio/ogg"> <source src="/i/song.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio> |
audio中的屬性和值與video 類似