HTML5 Video標籤

2014/09/29 來源：iteye

現代網際網路中，我們大量的使用視頻，在HTML5定義中提供了一個統一的方式來展示視頻內容。

網際網路視頻

現在網際網路視頻大都使用Flash來實現。但是不同的瀏覽器可能使用不同的插件。

HTML5定義了一個統一元素來指定視頻和音頻的插入和顯示，如下：分享一個最好用的UI前端框架！

<video width="320" height="240" controls="controls" id="gbin1"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>

當然，如果必要我們也需要添加高度和寬度。如果高和寬設定後，頁面加載後針對這個視頻的區域的大小會預留出來。如果沒有相關高和寬的屬性，瀏覽器則不能正確預留顯示視頻區域。效果就是頁面加載過程中，頁面布局可能變化。

你應該在<video>和</video>元素內容間加入文字內容，這樣可以保證如果瀏覽器不支持video標籤。頁面能夠顯示正確的文字。

video標籤允許加入多個<source>元素。這些元素可以連結到不同的視頻文件。當然，瀏覽器會使用第一個識別出的格式。

屬性屬性 值 描述

autoplay	autoplay	如果出現該屬性，則視頻在就緒後馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控制項，比如播放按鈕。
height	pixels	設置視頻播放器的高度。
loop	loop	如果出現該屬性，則當媒介文件完成播放後再次開始播放。
preload	preload	如果出現該屬性，則視頻在頁面加載時進行加載，並預備播放。如果使用 "autoplay"，則忽略該屬性。
src	url	要播放的視頻的 URL。
width	pixels	設置視頻播放器的寬度。

視頻和音頻格式支持

目前，<video>標籤支持3類文件格式 ：MP4， webM和Ogg。分享一個最好用的UI前端框架！

免責聲明：本文內容來源于iteye，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。