simonallen 技術部落格

Sign in Subscribe

SimonAllen

SimonAllen

Day05 幾個小工具

今天先來分享一些小工具，前端接到串影片的任務，在研究階段，除了公司的影片外，有時也會找非公司的影片源來測，這個時候只能上網找影片連結或工具來用。桌面應用程式 Postman 前端向後端索取影片，本質上還是發出一個 GET/POST 請求，因此透過Postman也可以檢查索取的狀況或吐回的東西。 VLCplayer 相當好用的播放器，也可以在本地端電腦播放網路串流影片，缺點是要下載 VLCplayer 回來安裝。 Chrome 擴充套件 Native HLS Playback 以 HLS.js 製作的 Chrome擴充套件，非常方便，直接以 HLS 直播連結另開 Chrome 新分頁（或輸入到網址列）就能播放了。 Native MPEG-Dash + HLS Playback 與 Native HLS Playback 類似，如果也想觀看 Dash

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-

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

Day02 影音檔格式、OGG 與 WebM

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

Day01 前言

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

SQL 筆記：刪除資料 DELETE WHERE

DELETE FROM 語法 DELETE FROM $表名稱但這樣寫會有個問題，一般較少這樣寫...原因是「會刪除全部的 row 欄位」 DELETE FROM WHERE 語法但要注意，一般不會如上述這樣寫，因為缺少了「WHERE」來篩選目標對象，會導致表中的所有 row 紀錄資料都將被刪除！一般還是會如下加上 WHERE 來指定特定目標刪除 row 資料 DELETE FROM $表名稱 WHERE $目標對象的條件; 刪除指定的使用者資料假設我們有一張 users 資料表如下： id name email 1 Alice alice@mail.com 2 Bob bob@example.

解決 CSS 困境的 scoped style

在使用Vue Cli開發時，Vue是將每個組件(副檔名.vue)拆封成HTML、CSS、JavaScript三個部分，也就是如下： <template> //這裡寫HTML </template> <script> //這裡寫JavaScript </script> <style> //這裡寫CSS </style> 但這樣就產生了一個問題，假如我在a.vue檔(a組件)寫了一段CSS <style> h2 { color:red; } </style> b.vue檔(b組件)、c.vue檔(c組件)