HTML5是HTML下一個主要的修訂版本,現在仍處於發展階段。目標是取代1999年所製定的HTML4.01和XHTML1.0 標準,希望能在網際網路應用迅速發展的時候,使網路標準能符合現在的需求。2012年12月17日,全球資訊網協會(W3C,World Wide Web Consortium)發出新聞稿,指出W3C已完成HTML5和Canvas 2D的功能制定工作,正式進入互通性和效能測試。W3C最終希望HTML5能在2014年底正式推出,並成為開發人員預設使用的網頁語言。HTML5 廣義的說,指的是包括HTML、CSS和JavaScript等在內的一套技術組合。HTML5的主要革新之一是它的語意標籤,像是<video>、<audio>、<section>、<article>、<header>和<nav>等。
<video> Tag
W3C把影片功能內建到瀏覽器,讓用戶無須安裝Plugin,也讓網頁開發人員不須運用Plugin內建影片到網站裡,直接使用Video標籤(Video Tag)。
回顧HTML5 Video草案的演進。要把Video功能內建到瀏覽器,第一個挑戰就是選擇一個合適的編解碼器(Codec)。合適的Codec可以確保影片播放的品質。市場上有的Codec包括了Ogg Theora、Ogg Vorbis、H.264等。在原有的W3C草案中,建議瀏覽器支持Ogg Theora影片、Ogg Vorbis聲音、Ogg影片文件格式(Container Format)。可是瀏覽器商在選擇Codec上無法達到一致看法。Firefox、Opera以及Chrome選擇支援Ogg的Theora和Vorbis,主因是這兩個技術的規格是Open Source的。Safari則背道而馳,選擇了H.264(Chrome可以相容)。
如果說HTML5可以播放影片,並不精確,它是利用網頁和瀏覽器搭載的CSS與Java所做出的效果,利用HTML5「語意標籤」中的<video>去執行,現在的瀏覽器大多數都支援HTML5,IE8和IE8以下不支援。
範例寫法:
- 代碼: 選擇全部
<video id="movie" preload controls loop poster="XXX.png" width="800" height="600">
<source src="XXX.mp4" type="video/mp4" />
<source src="XXX.ogv or .ogg" type="video/ogg" />
<source src="XXX..webm" type="video/web" />
</video>
屬性:依照需求加入
autoplay:自動播放,看需求設定,一般不用。
preload:預先載入,播放器會有影片的第一畫面出現。
controls:播放器控制面板。
loop:播循環放,看需求設定,一般不用。
poster:預覽圖片,影片未播放時載入的圖片,如果沒設定就是preload的第一畫面。
height:影片高度。
width:影片寬度。
src:影片位置,相對路徑或絕對路徑皆可。
BBCodes範例參考:
BBCode 使用方法
- 代碼: 選擇全部
[video]{URL}[/video]
HTML 替換代碼
- 代碼: 選擇全部
<video id="movie" preload controls loop width="800" height="600">
<source src="{URL}" type="video/ogg" />
<source src="{URL}" type="video/mp4" />
<source src="{URL}" type="video/web" />
</video>
線上說明
- 代碼: 選擇全部
[video]這兒貼上ogg、ogv、mp4、webm等影片網址[/video]
BBCodes圖示: