標籤：
本文為 兄弟連IT教育 機構官方 HTML5培訓 教程，主要介紹：HTML5移動開發之路（12）——從一個多媒體標籤說起
一、視頻播放
[html] view plain copy print?
- <html>
- <head>
- <title>多媒體播放</title>
- </head>
- <body>
- <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">
- </body>
- </html>
效果如下：
<embed> 標籤是 HTML 5 中的新標籤。
屬性HTML5 中的新屬性。
屬性 值 描述 height pixels 設定嵌入內容的高度。 src url 嵌入內容的 URL。 type type 定義嵌入內容的類型。 width pixels 設定嵌入內容的寬度。
<embed>標籤支援HTML5中的全域屬性，同時支援HTML5中的事件屬性下面我們來添加一個width屬性試一下 [html] view plain copy print?type 屬性規定被嵌入內容的 MIME 類型。
- <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>
有關MIME類型請參閱 IANA MIME 類型
例如： [html] view plain copy print?
- <!DOCTYPE html>
- <html>
- <body>
- <embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />
- </body>
- </html>
二、IANA MIME簡介
多用途互連網郵件擴充類型就是設定某種副檔名的檔案用一種應用程式來開啟的方式類型，當該副檔名檔案被訪問的時候，瀏覽器會自動使用指定應用程式來開啟。多用於指定一些用戶端自訂的檔案名稱，以及一些媒體檔案開啟檔案。
每個MIME類型由兩部分組成，前面是資料的大類別，例如聲音audio、圖象image等，後面定義具體的種類。常見的MIME類型(通用型)：超文字標記語言 (HTML)文本 .html text/htmlxml文檔 .xml text/xmlXHTML文檔 .xhtml application/xhtml+xml普通文本 .txt text/plainRTF文本 .rtf application/rtfPDF文檔 .pdf application/pdfMicrosoft Word檔案 .word application/mswordPNG映像 .png image/pngGIF圖形 .gif image/gifJPEG圖形 .jpeg,.jpg image/jpegau音效檔 .au audio/basicMIDI音樂檔案 mid,.midi audio/midi,audio/x-midiRealAudio音樂檔案 .ra, .ram audio/x-pn-realaudioMPEG檔案 .mpg,.mpeg video/mpegAVI檔案 .avi video/x-msvideoGZIP檔案 .gz application/x-gzipTAR檔案 .tar application/x-tar任意的位元據 application/octet-stream
三、HTML5簡介
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。
HTML 的上一個版本誕生於 1999 年。自從那以後，Web 世界已經經曆了巨變。
HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支援。
HTML5 是 W3C 與 WHATWG 合作的結果。
——W3C 指 World Wide Web Consortium，全球資訊網聯盟。
——WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力於 web 表單和應用程式，而 W3C 專註於 XHTML 2.0。在 2006 年，雙方決定進行合作，來建立一個新版本的 HTML。
為 HTML5 建立的一些規則：
- 新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
- 減少對外部外掛程式的需求（比如 Flash）——內建了很多強大的多媒體標籤
- 更優秀的錯誤處理
- 更多取代指令碼的標記
- HTML5 應該獨立於裝置——可以在PC和行動裝置上完美運行
- 開發進程應對公眾透明
HTML5 中的一些有趣的新特性：
- 用於繪畫的 canvas 元素
- 用於媒介回放的 video 和 audio 元素
- 對本地離線儲存的更好的支援
- 新的特殊內容元素，比如 article、footer、header、nav、section
- 新的表單控制項，比如 calendar、date、time、email、url、search
關於更多詳細的HTML5可以參考我的部落格專題：http://blog.csdn.net/column/details/dawanganban-html5.html
最新版本的 Safari、Chrome、Firefox 以及 Opera 支援某些 HTML5 特性。Internet Explorer 9 將支援某些 HTML5 特性。
四、HTML5中的全域屬性
下面的全域屬性可用於任何HTML5元素
屬性 描述 accesskey 規定訪問元素的鍵盤快速鍵 class 規定元素的類名（用於規定樣式表中的類）。 contenteditable 規定是否允許使用者編輯內容。 contextmenu 規定元素的操作功能表。 dir 規定元素中內容的文本方向。 draggable 規定是否允許使用者拖動元素。 dropzone 規定當被拖動的項目/資料被拖放到元素中時會發生什麼。 hidden 規定該元素是無關的。被隱藏的元素不會顯示。 id 規定元素的唯一 ID。 lang 規定元素中內容的語言代碼。 spellcheck 規定是否必須對元素進行拼字或語法檢查。 style 規定元素的行內樣式。 tabindex 規定元素的 tab 鍵控制次序。 title 規定有關元素的額外資訊。
五、全域事件屬性
HTML 4 增加了通過事件觸發瀏覽器中行為的能力，比如當使用者點擊某個元素時啟動一段 JavaScript。
下面的表格列出了可插入 HTML 5 元素中以定義事件行為的標準事件屬性。
Window 事件屬性window 對象觸發的事件。
適用於 <body> 標籤： 標顏色的是新標籤（html5)
表單事件
屬性 值 描述 onafterprint script 在列印文檔之後運行指令碼 onbeforeprint script 在文檔列印之前運行指令碼 onbeforeonload script 在文檔載入之前運行指令碼 onblur script 當視窗失去焦點時運行指令碼 onerror script 當錯誤發生時運行指令碼 onfocus script 當視窗獲得焦點時運行指令碼 onhaschange script 當文檔改變時運行指令碼 onload script 當文檔載入時運行指令碼 onmessage script 當觸發訊息時運行指令碼 onoffline script 當文檔離線時運行指令碼 ononline script 當文檔上線時運行指令碼 onpagehide script 當視窗隱藏時運行指令碼 onpageshow script 當視窗可見時運行指令碼 onpopstate script 當視窗記錄改變時運行指令碼 onredo script 當文檔執行再執行操作（redo）時運行指令碼 onresize script 當調整視窗大小時運行指令碼 onstorage script 當文檔載入載入時運行指令碼 onundo script 當 Web Storage 地區更新時（儲存空間中的資料發生變化時） onunload script 當使用者離開文檔時運行指令碼 由 HTML 表單內部的動作觸發的事件。
適用於所有 HTML 5 元素，不過最常用於表單元素中：
鍵盤事件
屬性 值 描述 onblur script 當元素失去焦點時運行指令碼 onchange script 當元素改變時運行指令碼 oncontextmenu script 當觸發操作功能表時運行指令碼 onfocus script 當元素獲得焦點時運行指令碼 onformchange script 當表單改變時運行指令碼 onforminput script 當表單獲得使用者輸入時運行指令碼 oninput script 當元素獲得使用者輸入時運行指令碼 oninvalid script 當元素無效時運行指令碼 onreset script 當表單重設時運行指令碼。HTML 5 不支援。 onselect script 當選取元素時運行指令碼 onsubmit script 當提交表單時運行指令碼 由鍵盤觸發的事件。
適用於所有 HTML 5 元素：
滑鼠事件
屬性 值 描述 onkeydown script 當按下按鍵時運行指令碼 onkeypress script 當按下並鬆開按鍵時運行指令碼 onkeyup script 當鬆開按鍵時運行指令碼 由滑鼠或相似的使用者動作觸發的事件。
適用於所有 HTML 5 元素：
媒介事件
屬性 值 描述 onclick script 當單擊滑鼠時運行指令碼 ondblclick script 當雙擊滑鼠時運行指令碼 ondrag script 當拖動元素時運行指令碼 ondragend script 當拖動操作結束時運行指令碼 ondragenter script 當元素被拖動至有效拖放目標時運行指令碼 ondragleave script 當元素離開有效拖放目標時運行指令碼 ondragover script 當元素被拖動至有效拖放目標上方時運行指令碼 ondragstart script 當拖動操作開始時運行指令碼 ondrop script 當被拖動元素正在被拖放時運行指令碼 onmousedown script 當按下滑鼠按鍵時運行指令碼 onmousemove script 當滑鼠指標移動時運行指令碼 onmouseout script 當滑鼠指標移出元素時運行指令碼 onmouseover script 當滑鼠指標移至元素之上時運行指令碼 onmouseup script 當鬆開滑鼠按鍵時運行指令碼 onmousewheel script 當轉動滑鼠滾輪時運行指令碼 onscroll script 當滾動元素滾動元素的捲軸時運行指令碼 由視頻、映像以及音頻等媒介觸發的事件。
適用於所有 HTML 5 元素，不過在媒介元素（諸如 audio、embed、img、object 以及 video）中最常用：
下一篇將詳細介紹全域屬性及事件的用法
屬性 值 描述 onabort script 當發生中止事件時運行指令碼 oncanplay script 當媒介能夠開始播放但可能因緩衝而需要停止時運行指令碼 oncanplaythrough script 當媒介能夠無需因緩衝而停止即可播放至結尾時運行指令碼 ondurationchange script 當媒介長度改變時運行指令碼 onemptied script 當媒介資源元素突然為空白時（網路錯誤、載入錯誤等）運行指令碼 onended script 當媒介已抵達結尾時運行指令碼 onerror script 當在元素載入期間發生錯誤時運行指令碼 onloadeddata script 當載入媒介資料時運行指令碼 onloadedmetadata script 當媒介元素的期間以及其他媒介資料已載入時運行指令碼 onloadstart script 當瀏覽器開始載入媒介資料時運行指令碼 onpause script 當媒介資料暫停時運行指令碼 onplay script 當媒介資料將要開始播放時運行指令碼 onplaying script 當媒介資料已開始播放時運行指令碼 onprogress script 當瀏覽器正在取媒介資料時運行指令碼 onratechange script 當媒介資料的播放速率改變時運行指令碼 onreadystatechange script 當就緒狀態（ready-state）改變時運行指令碼 onseeked script 當媒介元素的定位屬性 [1] 不再為真且定位已結束時運行指令碼 onseeking script 當媒介元素的定位屬性為真且定位已開始時運行指令碼 onstalled script 當取回媒介資料過程中（延遲）存在錯誤時運行指令碼 onsuspend script 當瀏覽器已在取媒介資料但在取回整個媒介檔案之前停止時運行指令碼 ontimeupdate script 當媒介改變其播放位置時運行指令碼 onvolumechange script 當媒介改變音量亦或當音量被設定為靜音時運行指令碼 onwaiting script 當媒介已停止播放但打算繼續播放時運行指令碼
HTML5移動開發之路（12）——從一個多媒體標籤說起 一、視頻播放
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
