HTML5視頻

2013/01/01 183 0 網站技術 , HTML

到現在為止,還沒有在網頁上顯示視頻的標準。
今天,大多數視頻都是透過插件來顯示。然而,不同的瀏覽器可能有不同的插件。
HTML5定義了一個新的元素,它指定了一個標準的方式在網頁上:<video>元素嵌入視頻/電影。

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
以上為基本的視頻原碼,第二行放mp4影片,第三行放ogg影片,第四行放瀏覽器不支援會顯示的內容。
因為不同瀏覽器所支援的影片格式不同,所以需要用多種格式,HTML5影片格式共3種:MP4、WebM、Ogg。

◎<video>屬性說明:
width="(長度單位)":指定影片方塊寬度。
height="(長度單位)":指定影片方塊高度。
audio="muted":影片設為靜音狀態。
autoplay="autoplay":自動播放影片。
controls="controls":顯示影片控制列。
loop="loop":自動重複播放。
preload="preload":讀取頁面時自動載入影片。如果autoplay則沒有作用。
src="(網址)":指定影片位置。
poster="(網址)":可代替影片的圖片位置。

瀏覽器 MP4 WebM Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3.6+ NO YES YES Safari 5+ YES NO NO Opera 10.6+ NO YES YES 以上為瀏覽器支援版本。

◎HTML5視頻標籤
標籤 描述 <video> 定義視頻或電影 <source> 定義多個媒體資源等媒體元素。 <track> 定義在媒體播放器中文本軌道。 資料提供:http://www.w3schools.com/html/html5_video.asp

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇