【Html5】Html5 & JavaScript開發小筆記—Video開發筆記
Html5新增了Video標籤，讓網站開發者，可以更容易地在網頁上置入影音元素
但影音擁有眾多的格式，雖無法一一支援，但支援了以下幾個影音格式，在這邊做了支援的列表
|
Browser |
MP4 |
WebM |
Ogg |
|
IE9+ |
Y |
N |
N |
|
Chrome 6+ |
Y |
Y |
Y |
|
Firefox 3.6+ |
N |
Y |
Y |
|
Safari 5+ |
Y |
N |
N |
|
Opera 10.6+ |
N |
Y |
Y |
但我們不知道使用者，會使用那些瀏覽器來進入網站，所以以下小弟所製作的網站筆記，使用了MP4+WebM兩種格式來互補，避免無法撥放的情形！
基本的video標籤語法
|
屬性 |
功能 |
| width | 調整播放面板大小(寬度) |
| height | 調整播放面板大小(高度) |
| src | 影片來源 |
| autoplay | 當頁面載入後自動撥放 |
| loop | 循環播放 |
| muted | 靜音 |
| controls | 播放面板是否擁有控制項(EX：撥放、暫停等按鈕) |
<video controls="controls" src="MediaFiles/happy.webm"></video>上段語法僅支援webm影音格式的瀏覽器
不支援的瀏覽器會出現
要如何讓各種瀏覽器都可以正常撥放影片？
答案是，多準備一份其他格式的影片，建議兩種以上，並且可以互補的格式！
例如本篇所使用的兩種格式(MP4與WEBM)
<video controls="controls" >
<source src="MediaFiles/happy.webm" />
<source src="MediaFiles/happy.mp4" />
</video>
在Video標籤中，包裹了source的標籤，把檔案來源放置於此瀏覽器就會自動尋找可撥放的格式了！
另外，取消控制面板的畫面，這個部分可以搭配loop與autoplay，用來撥放廣告影片非常適合！
<video src="MediaFiles/happy.webm" loop autoplay></video>
以上是小弟最近在寫學校作業所做的開發筆記，希望與大家分享
大家好我是饅頭，希望大家喜歡我的文章
如果有錯誤的地方請不吝指教 ^_^
