解決html5中video標(biāo)簽無(wú)法播放mp4問題的辦法

前言
最近發(fā)現(xiàn)了一個(gè)問題,在手機(jī)錄制了一個(gè)1.mp4文件,主流瀏覽器都能正常播放。但使用格式工廠將rmvb文件轉(zhuǎn)碼為2.mp4卻不能播放。通過查找相關(guān)的資料終于解決了,下面分享出來(lái)供大家參考學(xué)習(xí),下面來(lái)看看詳細(xì)的介紹:
問題分析
手機(jī)錄制的視頻屬性:
格式化工廠轉(zhuǎn)碼的視頻屬性:
首先排除代碼問題,路徑問題,瀏覽器不支持等問題。轉(zhuǎn)碼后的視頻編碼是mp4v,這是不能播放的原因,轉(zhuǎn)換為AVC(H264)編碼即可。
查閱文檔,關(guān)于video標(biāo)簽所支持的視頻格式和編碼:
- MPEG4 = 帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件
- WebM = 帶有VP8視頻編碼和Vorbis音頻編碼的 WebM文件
- Ogg = 帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件
通過上面的信息我們發(fā)現(xiàn)只有h264編碼的MP4視頻(MPEG-LA公司)、VP8編碼的webm格式的視頻(Google公司)和Theora編碼的ogg格式的視頻(iTouch開發(fā))可以支持html5的<video>標(biāo)簽。
解決方法
video標(biāo)簽允許多個(gè)source元素,source元素可以鏈接不同的視頻文件,瀏覽器將使用第一個(gè)可識(shí)別的格式,這樣可用來(lái)解決瀏覽器兼容問題。
<video controls="controls" width="100%"> <source src="1.mp4" type="video/mp4"> <source src="1.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

HTML頁(yè)面原生VIDEO標(biāo)簽隱藏下載按鈕功能
HTML5的Video標(biāo)簽有部分MP4無(wú)法播放的問題解析(多圖)
HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享
HTML5 video標(biāo)簽(播放器)學(xué)習(xí)筆記(二):播放控制
HTML5 video標(biāo)簽(播放器)學(xué)習(xí)筆記(一):使用入門
HTML5 Video標(biāo)簽的屬性、方法和事件匯總介紹
html5 video標(biāo)簽屏蔽右鍵視頻另存為的js代碼
html5視頻媒體標(biāo)簽video的使用方法及完整參數(shù)說明詳解