隨著HTML5技術的誕生普及，網頁影音串流與播放一直都是前端的熱門領域之一。
面對工作上的需求，即使不在影音公司工作，前端也可能會遇到需要串流的任務。若公司的影片放在Youtube上，那前端工程師研究 Youtube API 如何使用就好了。

事情往往不會這麼簡單。

不知道是不是因為大學就讀數位媒體的關係，在前公司與現任公司都有遇到非Youtube影音串接的機會...。

串接影片還是直播？

串接影片 (例如 MP4) 和串直播協議 (例如 HLS) 基本上是完全不同的事情，尤其現在瀏覽器幾乎都原生支援MP4，直播協議反而需要一些Library幫我們處理，找了Library處理後，又會衍生新的問題。

要涵蓋率還是功能多？

有的直播格式需要Flash才能看、有的直播格式瀏覽器支援度低，為了涵蓋率前端還得想辦法讓播放器在各瀏覽器都能運作，在開發上是要專心處理播放器的功能呢？ 還是處理涵蓋率呢？
當然一碼歸一碼，功能對播放器、影片或直播格式對瀏覽器，但若要處理涵蓋範圍，那原生播放器可以播嗎？ PC 版狀況如何？ 手機版狀況如何？

這都是前端處理影音和播放器需要考慮的點。

選擇障礙

前端播放器種類繁多，在尋覓最佳播放器或Library又會陷入選擇障礙，更別說，要是之後使用者回報影片不能看，那大家找起問題來可謂勞師動眾，到底是前端問題還是後端問題呢？難道使用付費播放器才是最保險的嗎？
　
　
　
　
　
影音播放是網頁前端的一門專業，既然這次公司有需求，需要花點時間研究播放器與前端直播，剛好可以藉由IT邦幫忙鐵人賽，來整理每天的進度。
這30天筆記內容，預計會有:

• 影片格式簡介
• 直播協議簡介
• HTML5 <video> 介紹
• Library介紹
• 數種第三方播放器的介紹與使用
• 第三方播放器的Plugins
• React+video.js...etc
  　
  　
  　
  　
  　

最後

若是內文有錯誤，希望大家能不吝於分享指教!
因為公司和部門不是影音相關，我也不是直播專業或影像辨識，這30天筆記會相對皮毛一點。

謝謝