A Morning Glare Battlefield
HTML5 媒體播放器:旭光戰場


視訊播放標籤命令與應用變遷 

網頁影音視訊的應用與發展,與 4 件事有關:網頁語言命令、媒體播放器、檔案格式、瀏覽器,而又以 HTML 4  與 HTML 5 形成分水嶺。 

 

Html5 Coding of Web Video

使用Html5 <video>設計網路視訊/媒體播放器

 

5 大瀏覽器共用程式

<video width="800" height="450" controls>
<source src="../Video/Swan.M12/Swan.M12.mp4" type="video/mp4">
<source src="../Video/Swan.M12/Swan.M12.webm" type="video/webm">
<source src="../Video/Swan.M12/Swan.M12.ogg" type="video/ogg">
Your browser does not support the video tag. 你的瀏覽器不支援 Html5 視訊。
</video>

<video>標籤

<video></video>音訊設定。

controls

設定出現視訊/媒體播放器。

style

以 css 設計視訊/媒體播放器形式與尺寸,當前有2種規格:新規格為 16:9(1280*720),傳統規格為 4:3(640*480)

此處設為高 450px; 寬 800px。預設為靠中。

source

音訊位址。

建議將音樂集中放在/Music資料夾中。

type

Html5 <video>雖然好用,但當前只支援 3 種音訊格式:MP4, WebM, Ogg。

且除了MP4外,其他2種格式,5 大瀏覽器不一定全部支援。

指定音訊格式,譬如:

type="video/mp4" 是一個MIME類型,type="video/mp4"  表示類型為 video:子類別型為: mp4,指定視訊格式為 mp4。

如果音訊格式只有1種,則僅須列1個<source>,省略另外2個。

如果音訊格式3種都有,則會以順序優先播放。

代替出現文字

如果使用者的瀏覽器不支援 Html5 音訊,就會出現以下代替文字:

「Your browser does not support the video element. 你的瀏覽器不支援 Html5 視訊。」

設計結果


HTML5 Video Player List

推薦的HTML5 媒體播放器

Free 免費媒體播放器

以下是統雄老師測試過、值得推薦的HTML5 Video Player。

相容,是指與 HTML4 網站相容,並播放 MP3,可惜即使可以與HTML4 網站相容,也不能播放 MP3,只能播H.264,即MP4檔案。

jQuery  是其中最簡單,花樣也最少,但需求簡樸或測試用,比較易於使用。

MediaElement.js 在部屬方面,示範相對簡潔清楚。 

名稱  網址  相容  相容規格 
jQuery  http://jplayer.org/  No  http://jplayer.org/latest/demos/
MediaElement.js   http://mediaelementjs.com/  No  http://mediaelementjs.com/#plugins  
SublimeVideo  http://sublimevideo.net/  No  http://docs.sublimevideo.net/supported-platforms 
Projekktor  http://www.projekktor.com  No  http://www.projekktor.com/compatibility/
html5media  http://html5media.info/   
Video.js  http://www.videojs.com/   

Not Free 付費媒體播放器

Kaltura http://corp.kaltura.com/

HDW Player http://www.hdwplayer.com/

HTML5 video player with Flash fallback

HTML5 播放器與 Flash 播放器並存

http://dev.opera.com/articles/view/simple-html5-video-flash-fallback-custom-controls/

http://code.tutsplus.com/tutorials/quick-tip-html-5-video-with-a-fallback-to-flash--net-9982

HTML5 Video Player Comparison 各種HTML5 播放器比較

http://html5video.org/wiki/HTML5_Player_Comparison

http://praegnanz.de/html5video/

HTML Video Solutions Set Ups

HTML5 播放器設定簡介

http://coolestguidesontheplanet.com/use-html-5-video-on-all-browsers/


HTML5 媒體檔案: H.264, MP4, ogg, WebM

HTML5 媒體播放器,原則上都只支持播放器符合 H.264 標準的檔案。

什麼是H.264?

H.264是一種高性能的視頻編解碼技術。目前國際上制定視頻編解碼技術的組織有兩個,一個是國際電聯(ITU-T),它制定的標準有H.261、H.263、H.263+等,另一個是國際標準化組織(ISO)它制定的標準有MPEG-1、MPEG-2、MPEG-4等。

而H.264則是由兩個組織聯合組建的聯合視頻組(JVT)共同制定的新數字視頻編碼標準,所以它既是ITU-T的H.264,又是ISO/IEC的MPEG-4高級視頻編碼(Advanced Video Coding, AVC),而且它將成為MPEG-4標準的第10部分。因此,不論是MPEG-4 AVC、MPEG-4 Part 10,還是ISO/IEC 14496-10,都是指H.264。

H.264 就是 MP4 

簡單的說,H.264 就是 MP4。

HTML5 媒體播放器另外還支持 Theora 格式的: .ogv, .ogg 檔案,以及Google 在推的V8, V9 標準的 .WebM 檔案。


HTML, xHTML : Function Tag 標註語言:功能命令精華篇HTML, xHTML : Function Tag 標註語言:功能命令精華篇

Cascading Style Sheets, CSSCascading Style Sheets, CSS: Presentation

<Object> Settings, File Converter, Widget Design 播放標籤參數.視訊檔案轉換.視訊小工具設計File Converter, Widget Design 視訊檔案轉換.視訊小工具設計

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題