分析H5網頁中video標籤中的MP4影片無法播放的緣由

Y2J
發布: 2017-05-19 13:26:09
原創
7329 人瀏覽過

今天一位朋友Q我說:為什麼我錄製的MP4影片在本地可以播放但是使用html5的video多媒體播放標籤不能正常播放只有一個進度條而不顯示圖像?當時我也很好奇MP4影片可以用video標籤播放呀,我就經常用,畢竟是好朋友我還是親自去篩檢了一下問題,這不結論處來了,其實就是一個視頻編碼的問題,格式雖然都是MP4但是html中只支援H.264的編碼格式,無奈只能重新轉換一下編碼了。

為了避免大家遇到同樣的問題我在這裡就給大家普及一下html5關於<video>標籤的知識吧:

< 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>標籤我就介紹到這裡,相信大家都對這個標籤已經有了深刻的了解!

【相關推薦】

1.

html/css免費視訊教學

#2. 

教你如何使用好HTML5的音訊和影片

3. 

教你如何增強H5中video標籤在瀏覽器中的相容性

4. 

詳解HTML5展示影片的標準

5. 簡述<video>標籤的參數與屬性

#

以上是分析H5網頁中video標籤中的MP4影片無法播放的緣由的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板