首頁 > web前端 > H5教程 > 淺談基於HTML5的線上影片播放方案_html5教學技巧

淺談基於HTML5的線上影片播放方案_html5教學技巧

WBOY
發布: 2016-05-16 15:45:46
原創
1706 人瀏覽過

如今在這個特殊的時代下:flash將死未死,微軟和IE的歷史問題,html5標準未定,蘋果和谷歌的閉源和開源之爭,移動互聯網的大勢所趨,瀏覽器各自為戰…這些都導致​​web開發者在設計視訊解決方案的時候相當困惑。本文圍繞著這個主題,來探討一下相關的技術,原理和工具。

編碼與格式的誤解
很多人將編碼和格式誤認為是同一個東西,往往以視頻文件的後綴來唯一確定視頻文件的支持程度。而事實上,用一句話來概括就是:視訊的檔案後綴(假設沒有惡意修改後綴)實際上代表一種封裝格式,而視訊或音訊的編碼演算法與封裝格式本身無直接的關係:同樣的封裝格式(即同樣的字尾)可以封裝不同編碼演算法的視訊和音訊。而影片播放設備或軟體是否支援影片的播放,不僅要看封裝格式,還要看編碼演算法。認清這一點是理解和排除問題的基礎。

封裝格式規定了視訊的所有內容,包括圖像,聲音,字幕,系統控制等,其中以圖像和聲音最為關鍵。

從MPEG說起
MPEG是一個定義視訊規格的國際組織,他們曾經推出的MPEG-1和MPEG-2實際上分別就是大家熟知的VCD和DVD,不過這都是遠古的東西了。我們來看看跟本文主題相關的MPEG-4規範。

MPEG-4規格規定了檔案字尾名為.mp4,目前包含三種影像編碼和壓縮演算法:XvidDivXAVC(H.264),其中Xvid和DivX也可以統稱為MPEG-4 Part 2或MPEG-4 Visual,而更知名的H.264和AVC是相同的概念。音訊方面則是AAC。以下關於相容的內容,來自維基百科和格式工廠以及筆者的測試:

Android瀏覽器:支援DivX和AVC,Xvid應該不支援
iPhone和iPad(iOS):支援DivX和AVC,Xvid不支援
Chrome:支援AVC,不支援DivX和Xvid。谷歌曾在2011年初宣布由於許可問題,將移除Chrome瀏覽器對AVC(H.264)的支援。但是直到目前的版本,AVC仍在被支援。另外,實際測試下來,如果是DivX和AAC封裝在mp4中的話,chrome可以播放,但只有聲音(AAC)。
Firefox和Opera:還是由於許可的問題,Firefox和Opera逐漸動搖了對AVC的支持,筆者在最新的Firefox中測試AVC仍然可以播放(維基百科的解釋是可能與系統本身俱有解碼器有關) ;至於DivX和Xvid,筆者在Firefox下的測試結果是不支援。從維基百科的兼容列表來看,Opera對AVC支援的不好。
IE:筆者的IE11能夠支援AVC,不支援DivX和Xvid
WebM的倡議
由於AVC(H.264)的授權問題,以Chrome、Firefox、Opera為首的開源陣營開始動搖對AVC的支持,儘管目前這些瀏覽器仍然能夠支援AVC,但是它們也傾向於一個稱為WebM的開源多媒體項目,該項目包括一個叫VP8的新的開源視訊編解碼方案。目前VP8已經發展到了VP9。作為封裝格式的WebM具有.webm的後綴和video/webm的MIME類型。音響方面,可使用Vorbis/Opus。從相容性來看,Chrome、Firefox、Opera對VP8的相容性相當理想,但Safari和IE幾乎無法支援。

開源的Ogg
Ogg幾乎與WebM相同,開源,被廣泛的在開源平台支援。其視訊編碼方案稱為Theora(有VP3發展而來,由Xiph.org基金會開發,可用於任何封裝格式),音訊為Vorbis。後綴通常為.ogv或.ogg,MIME類型為video/ogg。在相容性上,Chrome、Firefox、Opera能夠支援(但Opera在行動平台上無法支援),但是Safari和IE幾乎無法支援。

Html5方案
以上的討論實際上的大前提是:影片基於Html5的

*IE9 「只有當使用者安裝了VP8的編解碼器」才能支援VP8。

‡Google Chrome 2011年宣布 放棄H.264, 但是「還沒兌現」。 可以看出現在主流的仍然是MP4(AVC),但是為了解決「開源陣營」對AVC的搖擺不定,可以選擇利用video的多源方案,在AVC的基礎上額外提供對webm或ogg的支持:

XML/HTML Code複製內容到剪貼簿
  1. 影片 海報=海報=海報=海報
  2. ="電影.jpg""電影.jpg" > 控制>     來源 src "
  3.  
  4. 類型='影片/webm; codecs="vp8.0, vorbis"'>>>>>>>>>>>>>>>>>>  
  5.   來源 src=src=。 " 類型='影片/ogg; codecs="theora, vorbis"'
  6.      來源 src=
  7. src
  8. =“電影。 " 類型='影片/mp4; codecs="avc1.4D401E, mp4a.40.2"'
  9. >
  

  

p

>
這是後備內容

這是後備內容



>p

>
  
影片>   選擇器會根據自己的喜好來具體加載那種格式的串流文件,當然服務端必須對同一個視頻提供多種格式的支持,具體可以通過: 提供一個WebM的視訊版本(VP8 Vorbis)提供一個MP4的視訊版本(H.264 AAC(低複雜度))提供Ogg版本(Theora Vorbis)服務端推薦使用nginx ,請注意MIME類型的設定是否正確 舊版的IE和flash在html5流行之前,通用的視訊播放解決方案是flash和flv(flash從9開始支援h.264的mp4)。但隨著ios設備的流行,flash已經不是萬能藥了,越來越多的影片網站還是提供多元的解決方案,而且偏向於html5:相反,透過偵測agent是否支援html5來決定使用videoflash。在面對IE8在以下瀏覽器時,flash幾乎是唯一的選擇(silverlight的接受度普遍不高)。 當然針對flash和flv的方案,也有多種實作方法,作者能想到的有以下幾種: 服務端根據agent的類型,輸出不同的html,如果支援html5就輸出video mp4(avc)和webm(或ogg),否則輸出flash相關的標籤或腳本使用html5shiv和html5-video是IE也能夠支援影片標籤,並且使用Flash播放器來取代原生的影片播放。 將物件內嵌在影片中: XML/HTML 程式碼將內容複製到剪貼簿
  1. 影片 id=id=id=「電影 寬度="320" 高度="240"
  2.  預載控制
  3. >     來源 src " 類型="視訊/webm; 編解碼器=vp8,vorbis"
  4. 🎜 >/>
  5.      來源 src " 類型="視訊/ogg; 編解碼器=theora,vorbis" 🎜 >/>  
  6.   來源 src=src= " />
  7.   
  8.   物件 寬度=寬度== 🎜> 高度="240"  
  9. 「應用程式/x-shockwave-flash」       資料="flowplayer-3.2.1.swf"
  10. "flowplayer-3.2.1.swf""flowplayer-3.2.1.swf" >     參數 名稱=“電影”  ="flowplayer-3.2.1.swf"
  11.  
  12. >       參數 名稱="允許全屏"  ="true" 
  13. /> /> /> />>/>/>     參數 名稱 名稱 名稱 值="config={'clip': {'url': 'http://wearehugh.com/dih5/ pr6 .mp4', 'autoPlay':false, 'autoBuffering':true}}" />  
  14.     <p>Muat turun video sebagai <a href="pr6.mp4">MP4a><a href="pr6.webm">WebMa>, atau <a  href="pr6.ogv">Ogga >.p>  
  15.   objek>  
  16. video>  
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板