Sign in Subscribe

ithome

Day04 FLV、F4V

今天來快速介紹 FLV 在 HTML5 出來以前， FLV 是網路上最流行的影片格式，相信大家對這個格式也不陌生。 FLV 全名 FLASH VIDEO，看到 FLASH 一詞就知道和 Adobe 有關係。 而F4V 這個格式，其實是 FLV 的後繼格式。因為 FLV 主要採用的是 H.263 影像編碼格式，雖然影音檔是個容器， 但 FLV 對 後續推出的 H.264 影像編碼還是有極限在，於是 Adobe 推出了 F4V 格式，其主要採用的就是 H.264 影像編碼格式， F4V 的 4 指的是 MPEG-4
SimonAllen

Day03 MPEG、MP4 與 H.264

今天要簡介 MP4，但要講 MP4 就不得不先介紹，什麼是 MPEG： MPEG MPEG 是 ISO（ 國際標準組織 ）在1988年所成立的工作小組之一：由眾多成員組成的影音組織群組 Moving Picture Experts Group 簡稱，這個組織制定了多個影音/圖像編碼標準，因此這些編碼或壓縮標準也被稱為 MPEG 系列。 MPEG-1 MPEG-1 系列是由MPEG制定的第一個影音壓縮標準，早期的VCD就是廣泛用到了MPEG-1 系列的影音壓縮標準。 MPEG-2 MPEG-2 系列是由MPEG制定的另一個影音壓縮標準，這個系列的影、音編碼被廣泛用在DVD中。(可以說是大家最親切常用的壓縮標準) MPEG-3 MPEG-3 不是 MP3 MPEG-3 不是 MP3 MPEG-3 不是 MP3 MPEG-3 系列在制訂時，發現與MPEG-2有點類似，就被併入MPEG-2 系列中了。
SimonAllen

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

Day30 心得-持續學習、持續成長

今天是鐵人賽第30天，很榮幸能參與這個活動並完賽。 第一天說要至少完成克服js的奇怪部分第6章節，而我也做到了，目前進度是： (有些地方會跳著看，第6章後不少段落已看完) 還是來點賽後檢討： 1. 時間分配不均 畢竟已開始上班，平日時間只剩白天的空檔或晚上可以利用，假日也不會全程坐在電腦前，在學習、筆記時間的拿捏還需要調整。 2. 效率不足 時間充足的狀況下，看完一段影片，縱使是先前就看過的段落或知曉的知識，還是需要點時間消化成文字。 有時消化著消化著就看使做其他事情，導致效率並不是很好，可能某段影片很短，但我卻看了3遍才真正進入狀況，浪費掉一些無謂的時間。 3. 惰性 承2，常發生電腦在播影片，我人坐在電腦前滑手機的狀況，尤其後期有點懶惰，每天都很想偷懶。 4. 文筆不夠流暢 學習時，腦子知道是一回事，但要轉換換成文字又是另一回事，這導致筆記有些部分太口語，有些又太流水帳，我的文筆潤飾還需要再加強。 上面最主要的問題點是2、3。 　 開賽前，為了不讓自己在30天
SimonAllen

Day29 Object.create與class

今天來看看其他建立物件的方法 除了new建構子和物件實體語法，JS還有別種建立物件的方法，那就是ES5新增的Object.create和ES6新增的類別class。 先來看Object.create，以下為程式碼： var Flash = { firstname: '預設值', lastname: '預設值', run: function(){ return 'Run,' + this.firstname + ',Run!'; } } var Barry = Object.create(Flash); console.log(Barry); 首先用物件實體語法創建物件並以變數Flash指向它。 接著使用使用Object.create()方法並傳入Flash當參數，並以變數Barry指向它。 現在用console.log印出Barry，結果是： 真的只是一般的空物件嗎? 點開瀏覽器console印出的這個空物件 我們可以看到，Barry(指向的)
SimonAllen

Day28 內建的函式建構子

今天來看看內建的函式建構子 什麼是內建的函式建構子？ 其實是將JS的內建的Number()、String()、Date()....等其他內建函式，與new函式建構子一起使用。 來看看看程式碼，直接在Chrome瀏覽器console上操作。 Number()是JS的內建函式之一，在程式碼Number的開頭前多了一個new建構子，根據昨天筆記，我們知道new這個function constructor函式建構子會創建新物件，並將後方函式內的this指向它，依照函式內的設定創造該新物件的屬性。 現在變數a指向的東西，並不是基本型別Primitive Types，而是物件型別Object Type，在這個物件裏頭，有一個基本型別數值3的存在。(別忘記物件是名稱與值配對的組合) 所以a是物件，原型是Number，用typeof檢查a的型別： 我們在console打Number.prototype.可以看到一些prototype的方法： prototype不是用來取用函式自己的原型，而是用來取用new建構子創造出來的物件原型， 這代表我們可以對物件a做一些操
SimonAllen