iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

前端影片與直播筆記 系列

30天筆記
以純前端的角度入門
影片、直播協議與播放器介紹

鐵人鍊成 | 共 30 篇文章 | 66 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day01 前言

隨著HTML5技術的誕生普及,網頁影音串流與播放一直都是前端的熱門領域之一。面對工作上的需求,即使不在影音公司工作,前端也可能會遇到需要串流的任務。若公司的影片...

2018-10-16 ‧ 由 Simon Barry 分享
DAY 2

Day02 影音檔格式、OGG 與 WebM

影音檔格式 在簡介常見影音格式前,要先說明一下,所謂的影音檔格式,比較像個容器,這個容器基本上封裝了影像編碼和音訊編碼,也就是對應畫面和聲音,除了影像和聲音外,...

2018-10-17 ‧ 由 Simon Barry 分享
DAY 3

Day03 MPEG、MP4與H.264

今天要簡介 MP4,但要講 MP4 就不得不先介紹,什麼是 MPEG: MPEG MPEG 是 ISO( 國際標準組織 )在1988年所成立的工作小組之一:由...

2018-10-18 ‧ 由 Simon Barry 分享
DAY 4

Day 04 FLV、F4V

今天來快速介紹 FLV在 HTML5 出來以前, FLV 是網路上最流行的影片格式,相信大家對這個格式也不陌生。 FLV 全名 FLASH VIDEO,看到 F...

2018-10-19 ‧ 由 Simon Barry 分享
DAY 5

Day05 幾個小工具

今天先來分享一些小工具,前端接到串影片的任務,在研究階段,除了公司的影片外,有時也會找非公司的影片源來測,這個時候只能上網找影片連結或工具來用。 桌面應用程式...

2018-10-20 ‧ 由 Simon Barry 分享
DAY 6

Day06 HLS 直播協議簡介

今天來介紹 HLS 直播協議。 HLS 全名 HTTP Live Streaming ,是由蘋果提出的媒體傳輸協議,看到 HTTP 一詞,就知道這個協議是走HT...

2018-10-21 ‧ 由 Simon Barry 分享
DAY 7

Day07 RTMP 直播協議簡介

今天來簡介 RTMP 直播協議。 RTMP 全名 Real-Time Messaging Protocol ,是由 Adobe 所有的媒體傳輸協議,其走的是 T...

2018-10-22 ‧ 由 Simon Barry 分享
DAY 8

Day08 DASH ( MPEG-DASH ) 直播協議簡介

今天來簡介 DASH 直播協議。 DASH 全名 Dynamic Adaptive Streaming over HTTP ,它是由 MPEG 開發的直播協議,...

2018-10-23 ‧ 由 Simon Barry 分享
DAY 9

Day09 HTTP-FLV 簡介

今天來簡介 HTTP-FLV。 以影音串流來說,影像編碼是影像編碼;影片是影片(容器檔案);直播協議是傳輸協議,這都是不同的事情, HTTP-FLV,以字面上來...

2018-10-24 ‧ 由 Simon Barry 分享
DAY 10

Day10 Media Source Extensions 媒體源擴展

今天來簡介什麼是媒體源擴展 Media Source Extensions 此篇並不會介紹詳細的使用方法,想瞭解具體用法可見文章最末參考資源。 前幾天講了一...

2018-10-25 ‧ 由 Simon Barry 分享