小編給大家分享一下HTML5 video如何實(shí)現(xiàn)瀏覽器兼容，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
本文我們將和大家分享關(guān)于HTML5 video 實(shí)現(xiàn)瀏覽器兼容的方法，在過(guò)去 flash 是網(wǎng)頁(yè)上最好的解決視頻的方法，截至到目前還算是主流，像那些優(yōu)酷之類的視頻網(wǎng)站、蝦米那樣的在線音樂(lè)網(wǎng)站，仍然使用 flash 來(lái)提供播放服務(wù)。但是這種狀況將會(huì)隨著 HTML5 的發(fā)展而改變。就視頻而言，HTML5 新增了 video 來(lái)實(shí)現(xiàn)在線播放視頻的功能。
使用 HTML5 的 video 可以很方便的使用 JavaScript 對(duì)視頻內(nèi)容進(jìn)行控制等等，功能十分強(qiáng)大，同時(shí)代碼比較少加快加載速度。此外跨平臺(tái)性比較好，特別是一些平板、手機(jī)等。例如蘋果公司的產(chǎn)品不支持 flash 僅支持 HTML5 中的 video 功能。
但是 HTML5 的兼容性問(wèn)題是個(gè)硬傷，我們可以在網(wǎng)頁(yè)中使用 video 來(lái)播放視頻，但使用早期瀏覽器的訪問(wèn)者可能無(wú)法正常觀看這個(gè)視頻。此外，由于視頻編碼器的歷史淵源導(dǎo)致各種瀏覽器支持的視頻格式不同。應(yīng)對(duì)這些問(wèn)題，想在網(wǎng)頁(yè)中使用 HTML5 video 功能，可以按照下面三個(gè)步驟操作。
第一步：提前準(zhǔn)備好多格式視頻文件
由于編碼器的版權(quán)問(wèn)題，導(dǎo)致不同瀏覽器對(duì)視頻格式的兼容性不同。目前沒有一個(gè)視頻格式兼容所有瀏覽器，唯一的解決方法就是把視頻轉(zhuǎn)換成多種格式。
首先要準(zhǔn)備一個(gè) mp4 格式的視頻，可以在蘋果設(shè)備中使用；其次要準(zhǔn)備 ogv 格式的視頻，用在火狐瀏覽器中；最后要準(zhǔn)備一下 webm 格式的視頻，這個(gè)可以用在谷歌瀏覽器等。webm 是谷歌提出的，開源、免費(fèi)，很有可能成為兼容所有瀏覽器的視頻格式。
準(zhǔn)備多格式瀏覽器的麻煩之處在于轉(zhuǎn)換格式。視頻轉(zhuǎn)換工具國(guó)內(nèi)的功能比較少，轉(zhuǎn)換格式可能沒有上面后兩個(gè)，而且質(zhì)量良莠不齊，往往需要注冊(cè)才能使用。推薦一個(gè)國(guó)外的工具 Online converter ，在線免費(fèi)視頻轉(zhuǎn)換工具。甚至不用安裝軟件，直接選擇相應(yīng)的目標(biāo)格式，然后上傳視頻，配置一下參數(shù)就可以轉(zhuǎn)換出來(lái)了。沒有合適工具的朋友，可以嘗試一下。
第二步：編寫對(duì)應(yīng) HTML5 video 代碼
HTML5 中的 video 實(shí)際上就是一個(gè)簡(jiǎn)單的標(biāo)簽，包含了一些視頻相關(guān)信息等。下面我直接給出具體代碼，然后簡(jiǎn)單解釋一下：
你瀏覽器不支持 video 功能，點(diǎn)擊這里下載視頻：
video 標(biāo)簽表示這里是一個(gè)視頻，width、height 屬性分別表示這個(gè)視頻內(nèi)容的寬高（單位像素）。video 標(biāo)簽中可以包含 source 標(biāo)簽，source 標(biāo)簽用來(lái)表示引用的視頻和視頻的格式、類型。為了保證向下的兼容性，我們還在 video 標(biāo)簽中加了一句提示，這句話在支持 video 標(biāo)簽的瀏覽器中是不會(huì)顯示的，如果不支持就會(huì)顯示出來(lái)。這里，還增加了一個(gè)視頻的下載地址，如果瀏覽器不支持，可以讓用戶選擇下載下來(lái)看。
特別需要注意一點(diǎn)，你的主機(jī)必須能正確的處理這事些視頻請(qǐng)求。確保你的主機(jī)被請(qǐng)求這些視頻的時(shí)候會(huì)在 Content-Type 頭發(fā)送正確的 MIME 類型。如果你不清楚，可以咨詢一下主機(jī)服務(wù)商，也可以自己添加。如果主機(jī)支持 .htaccess ，可以在 .htaccess 文件中增加下面語(yǔ)句：
大體就是這樣，比較簡(jiǎn)單，更加具體的關(guān)于 video 的使用方法，可以搜索一下，也可以見本文擴(kuò)展閱讀鏈接，在這里不再贅述。
第三步：為舊版瀏覽器做兼容
前面說(shuō)過(guò)，如果瀏覽器不支持 video ，將會(huì)把 video 中的提示內(nèi)容顯示出來(lái)。那么對(duì)付老舊瀏覽器，我們可以用傳統(tǒng)的 flash 來(lái)替換這個(gè)提示內(nèi)容。這樣，當(dāng)瀏覽器不兼容 video 標(biāo)簽的時(shí)候，就會(huì)顯示出 flash 版本的視頻。例如：
直接按照原來(lái)正常的 flash 引入方法寫進(jìn) video 標(biāo)簽中即可。這樣，我們就實(shí)現(xiàn)了跨瀏覽器兼容的 video 功能使用。
以上是HTML5 video如何實(shí)現(xiàn)瀏覽器兼容的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！
重慶分公司
重慶分公司
