解決H5網頁中用video標籤無法播放MP4影片的方法

    為什麼錄製的MP4影片在本機可以播放但是使用html5的video多媒體播放標籤不能正常播放只有一個進度條而不顯示影像？其實就是一個視訊編碼的問題，格式雖然都是MP4但是html中只支援H.264的編碼格式，無奈只能重新轉換編碼了。

    為了避免大家遇到同樣的問題我在這裡就給大家普及一下html5關於<video>#標籤的知識吧：在使用html4協定做網站時我們想要在網頁上播放一個影片要不使用flash去播放，要嘛就是嵌入式頁面來實現，對於html5來說這兩種方法非常的不方便因為一個牛逼哄哄的<video>出現了，這個標籤的功能就是讓多媒體檔案可以很方便的在網頁中播放。

html中播放一個影片只需要一個標籤：

1. #"http:// sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300"# >

程式碼雖然少了很多，但是功能卻很健全，這就是html5的亮點之一吧！

關於<video>標籤所支援的視訊格式和編碼：

• MP4 = MPEG 4檔案使用H264 視訊編解碼器和AAC音訊編解碼器

• WebM = WebM 檔案使用VP8 視訊編解碼器和Vorbis 音訊編解碼器

• Ogg = Ogg 檔案使用Theora 視訊編解碼器和Vorbis音訊編解碼器

透過上面的資訊我們會發現只有h264編碼的MP4視訊（MPEG-LA公司）、VP8編碼的webm格式的視訊（Google公司）和Theora編碼的ogg格式的影片（iTouch開發）可以支援html5的<video>標籤。

如果瀏覽器不支援video標籤怎麼辦？

例如IE瀏覽器還有舊版的瀏覽器對html5的支援不太好，當使用者用這些瀏覽器開啟我們有影片的網頁怎麼辦呢？

我們可以把程式碼這樣寫：

1. "http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300">您的瀏覽器不支援播放該影片！

這樣在不支援html5的瀏覽器中就會提示「您的瀏覽器不支援播放該影片！」啦！

關於video標籤的擴充參數說明：

video 元素允許多個 source 元素。 source 元素可以連結不同的影片檔案。瀏覽器將使用第一個可識別的格式，這樣我們只要多準備幾個不同格式的影片就可以了。

用法：

1. "500" height="250" controls= "controls">

2. "movie.ogg" type="video/ogg"> ;

3. "movie.mp4" type="video/mp4">

4. 您的瀏覽器不支援此種影片格式。

1. #autoplay :出現該屬性表示影片在就緒後將自動播放，用法：autoplay="autoplay"

2. controls :出現該屬性意味著向使用者顯示控件，如播放按鈕等，用法：controls="controls"

3. #height:設定高度     width:設定寬度

4. #loop:自動重播，用法：loop="loop"

5. #preload :影片在頁面載入時進行載入並預備播放，用法：preload="auto" - 當頁面載入後載入整個影片；preload="meta" - 當頁面載入後只載入元資料；preload="none" - 當頁面載入後不載入影片。 注意：若使用了autoplay，則忽略preload

6. src:要播放影片的url

##關於< video>標籤我就介紹到這裡，相信大家都對這個標籤有了深刻的了解！

【推薦課程：

Html5影片教學】

#

以上是解決H5網頁中用video標籤無法播放MP4影片的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！