ithome 鐵人賽:前端影片與直播筆記

Day02 影音檔格式、OGG 與 WebM

影音檔格式 在簡介常見影音格式前,要先說明一下,所謂的影音檔格式,比較像個容器,這個容器基本上封裝了影像編碼和音訊編碼,也就是對應畫面和聲音,除了影像和聲音外,有的影音檔容器還可以一併封裝文字檔(字幕)或其他檔案。 有了這個概念,接著來看看 OGG 格式與 WebM 這兩個影音檔格式 HTML5的原生標籤<video>可以播放OGG和WebM,一般寫法如下: <video controls> <source src="ogg影片連結" type="video/ogg"> </video> 或 <video controls> <source src=
SimonAllen

Day01 前言

隨著HTML5技術的誕生普及,網頁影音串流與播放一直都是前端的熱門領域之一。 面對工作上的需求,即使不在影音公司工作,前端也可能會遇到需要串流的任務。若公司的影片放在Youtube上,那前端工程師研究 Youtube API 如何使用就好了。 事情往往不會這麼簡單。 不知道是不是因為大學就讀數位媒體的關係,在前公司與現任公司都有遇到非Youtube影音串接的機會...。 串接影片還是直播? 串接影片 (例如 MP4) 和串直播協議 (例如 HLS) 基本上是完全不同的事情,尤其現在瀏覽器幾乎都原生支援MP4,直播協議反而需要一些Library幫我們處理,找了Library處理後,又會衍生新的問題。 要涵蓋率還是功能多? 有的直播格式需要Flash才能看、有的直播格式瀏覽器支援度低,為了涵蓋率前端還得想辦法讓播放器在各瀏覽器都能運作,在開發上是要專心處理播放器的功能呢? 還是處理涵蓋率呢? 當然一碼歸一碼,功能對播放器、影片或直播格式對瀏覽器,但若要處理涵蓋範圍,那原生播放器可以播嗎? PC 版狀況如何? 手機版狀況如何? 這都是前端處理影音和播放器需
SimonAllen