html5--4-1 video/視訊播放
學習要點
- 掌握video元素的基本用法
直到現在,在網頁中的大多數視訊是通過插件（比如 Flash）來顯示的。然而，并非所有浏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視訊的标準方法，這樣播放視訊就不必依賴外部插件
在本套課程中我們不會講解音/視訊的的發展史和編碼解碼的相關知識，有興趣的朋友可以去查閱相關資料。我們重點學習video和audio兩個元素的使用。
目前由于專利、商業競争等原因各個浏覽器對視訊的支援格式各不相同，但是這個支援是動态變化的。
目前，video 元素支援三種視訊格式：
- Ogg = 帶有 Theora 視訊編碼和 Vorbis 音頻編碼的 Ogg 檔案
支援的浏覽器有：Firefox、Opera、Chrome
- MPEG4 = 帶有 H.264 視訊編碼和 AAC 音頻編碼的 MPEG 4 檔案
支援的浏覽器有：IE9+、Chrome、Safari
雖然目前應用較廣，單有專利保護，是收費在
- WebM = 帶有 VP8 視訊編碼和 Vorbis 音頻編碼的 WebM 檔案
支援的浏覽器有：Chrome、Opera、Safari
專門為網頁傳播而設計在，清晰度高，壓縮率也很高，并且開源免費，未來可能會成為主流。目前國外大在視訊網站很多采用
video元素的屬性
| 屬性 | 屬性值 | 描述 |
| src | url | 要播放的視訊的 URL位址。 |
| width | 正整數/百分比 | 設定視訊播放器的寬度。 |
| height | 設定視訊播放器的高度。 | |
| autoplay | 空值/autoplay | 視訊在就緒後自動播放。 |
| loop | 空值/loop | 循環播放。 |
| control | 空值/controls | 向使用者顯示控件，比如播放按鈕 |
執行個體
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <video src="res/video.mp4" controls="">
9 你的浏覽器暫不支援HTML5的vedio元素！
10 </video><br><br>
11 <video src="res/video.webm" controls="">
12 你的浏覽器暫不支援HTML5的vedio元素！
13 </video>
14 </body>
15 </html> 我的旨在學過的東西不再忘記（主要使用艾賓浩斯遺忘曲線算法及其它智能學習複習算法）的偏公益性質的完全免費的程式設計視訊學習網站：
fanrenyi.com；有各種前端、後端、算法、大資料、人工智能等課程。
版權申明：歡迎轉載，但請注明出處
一些博文中有一些參考内容因時間久遠找不到來源了沒有注明，如果侵權請聯系我删除。