iT邦幫忙

DAY 3
0

HTML5 & CSS3系列 第 3

30天分享(5) - HTML5 <video> 標籤

HTML5 除了 <audio> 標籤,也新增了 <video> 標籤,使影片能輕易的顯示在網頁上,
不過必須瀏覽器支援的格式,各家瀏覽器支援的格式不太相同,
得注意 IE8 不支援 HTML5 影片標籤,
非常推薦使用 Chrome 瀏覽器,Chrome 對於 HTML5 的大部分定義都是最快支持的,
所以比較不會有支援上問題,如果仍是遇到狀況,可以先找瀏覽器是否支援 HTML5 最新更新定義的技術。

<video> 支援以下格式 :

MP4 : Opera 瀏覽器不支援
WebM : IE & Safari 不支援
Ogg : IE & Safari 不支援

必須先將影片檔轉碼成以上的格式才能在網頁上正常播放,
轉檔可以用轉檔軟體輕易的轉成需要的格式,
例如 Any Video Converter Free、格式工廠等等。
(由於支援格式可能會變動,如果以上格式對應還是無法顯示,建議多試幾種格式,
如需支援大部分格式,必須使用兩種格式以上才能達成。)

下面為 <video> 標籤用法 :

<video poster="pic.jpg" width="800" height="600" autoplay controls loop muted >
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
你的瀏覽器不支援
</video>

跟 <audio> 標籤一樣都有 autoplay、controls、loop 的屬性,用法也相同,
但多了poster 跟 muted 的屬性,poster 是影片尚未播放時會顯示的圖片,
引號內填圖片路徑即可,muted 這個屬性可以設定影片播放是否靜音,
這些屬性都很易用,而且都不需要動到 javascript 的部分,
但如果其他功能需要自訂就必須從 javascript 設定。


上一篇
30天分享(4) - HTML5 <canvas> 標籤
下一篇
30天分享(6) - HTML5 <svg> 標籤
系列文
HTML5 & CSS328
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言