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 width="1080" height="1920" controls>
<source src="路徑/檔名.mp4"
type="video/mp4">
</video>
<video>標籤
<video></video>視訊設定。
controls
設定出現視訊/媒體播放器。
style
以 css 設計視訊/媒體播放器形式與尺寸，當前有2種規格：新規格為 16：9（1280*720），傳統規格為 4：3（640*480）。
此處設為高 450px; 寬 800px。預設為靠中。
手機尺寸：width="1080" height="1920"
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 標註語言：功能命令精華篇
Cascading Style Sheets, CSS: Presentation
File Converter, Widget Design 視訊檔案轉換.視訊小工具設計
