HTML5 <video> Tag

有關網頁、網站方面的問題或心得都可提出。

HTML5 <video> Tag

文章yunol » 週日 9月 15, 2013 12:27 pm

HTML5
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圖示:
Video-Tag_BBCodes.png
Video-Tag_BBCodes.png (78.16 KiB) 被瀏覽 6876 次
圖檔
頭像
yunol
Site Admin
 
文章: 6562
註冊時間: 週日 11月 16, 2003 11:50 pm
來自: 台中

HTML5 <video> Tag 範例影片!

文章yunol » 週日 9月 22, 2013 10:45 pm

範例影片:
IE8和IE8以下不支援,看不到影片,請升級IE瀏覽器,XP系統瀏覽器僅能升級到IE8,
有時升級也沒用,例如它不支援開源格式的ogg、ogv,範例影片為ogv檔案格式,建議更換瀏覽器為Chrome或Firefox。
雖然可透過在網頁中添加js代碼的方式或安裝Google Chrome Frame來解決目前IE瀏覽器對HTML5支援的問題,但不在此篇討論範圍。
此影片為ogv檔案,Chrome或Firefox可正常瀏覽。

此影片為mp4檔案,Chrome或IE8以上瀏覽器可正常瀏覽。

綜合以上,HTML5 <video> Tag支援度最佳的瀏覽器是Chrome,ogv檔案小於mp4。
Video檔案轉換:OggConvert,可以將各種影音檔案轉換為Ogg、Ogv等檔案格式。
http://itschool.rdec.gov.tw/blog/post.do?bid=8&pid=862
圖檔
頭像
yunol
Site Admin
 
文章: 6562
註冊時間: 週日 11月 16, 2003 11:50 pm
來自: 台中


回到 網頁程式編寫、網站架設等相關議題

誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 1 位訪客