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

Day30 心得-持續成長、持續前進

不知不覺就完成第二次鐵人賽 這次有幸加入一個公司團隊,前端 team 內有過半的成員參加鐵人賽,雖然前輩喊團報好幾次,但最終大家還是下水餃般的各自報名。我先自首我是拖到最後才報名的 不可否認,當周遭也有夥伴參賽時,對參賽者的動力會有很大的幫助。 賽後檢討 一樣來點賽後檢討 時間分配不均 去年就有的問題,不過今年可用時間和去年不一樣 ( 時間更壓縮 ),雖然在學習、筆記時間的拿捏已經比去年好許多,但仍有調整的空間。 心態調配 主要得面對自己心中的障礙,畢竟去年的這個時候,也是在前公司處理影音相關的任務,說實話有點膩了,現在完全不敢想明年會不會也是這樣XD 反過來說,自己是不是不穩定? 這 30 天不斷思索這個問題,是否心態上還有調整的地方?但 今日不做,明日就會後悔是一定的。 學習事項的優先性 鐵人賽期間,常常有似乎有更重要的事要做這種想法。 隨著前端技能的增加,對網頁眼界的擴展反而讓待學習事項越積越多,這 30 天得忍住摸其他東西的慾望,花時間在鐵人賽主題上,也算是對前端工程師的一種考驗吧。 文筆流暢度 與去年相比
SimonAllen

Day29 Video.js 影片標題套件

今天的內容仍是 Video.js 如果我想要替 Video.js 影片添加標題文字,例如 Youtube 全螢幕時,左上角會有標題文字一樣,我該怎麼做呢? 播放器的影片標題和昨天的浮水印一樣,可以透過純 HTML + CSS 來達成,這裡我一樣選擇使用 Videojs plugins 的方式來添加浮水印。 video.js 影片標題套件 ITMAN_title 既然昨天都能自定義、修改別人的 Video.js 浮水印套件,那當然自己也能寫一個,今天就來介紹自己寫的 video.js 標題套件:video.js 影片標題套件 ITMAN_title。 安裝、引入檔案 git clone 此專案後,取出 ITMAN.title.css
SimonAllen

Day28 Video.js 浮水印套件

Day28 Video.js 浮水印套件 今天的內容一樣是 Video.js 我們來看看如何替播放器加上浮水印。 這裡的浮水印是添加在播放器上,而不是添加在影片上。所以如果有人寫爬蟲抓走影片片源,影片本身還是不會有水印的。 前端能做的不是改變影片(片源)本身的內容,而是從<vidoe>和其周遭的 HTML 標籤著手,想辦法把水印圖像疊在播放器介面上。 將播放器添加浮水印圖片不外乎是三種方式: 1. 用 HTML 的<img>圖片疊上去 2. 用 HTML 的空 div 和 CSS 的 background-img 搭配疊上去 3. 承上,改用偽元素來完成 採上面任一種作法後,用CSS 絕對定位 去對齊播放器位置。 我們可以暴力用
SimonAllen

Day27 Video.js + React 播放器整合

2021年更新: Video.js 文件有更新與 React 整合範例,有加入 使用 useEffect 的寫法。 而除了 Video.js 官方範例外,實務上開發者也會將 Videojs 包成一個自己的 custom hook 再去呼叫,故這篇現在建議看看就好。 今天的內容會用 React + Video.js 去做出自己的 React 播放器元件。 前端在使用 React 開發網站時,有時會碰到第三方套件沒有 React 版本,而需要自己去整理、調整程式碼。 幸運的是:Video.js 文件有與 React 整合的例子 ( 雖然就只有這一頁 )。 開發環境: 使用 create-react-app 建立環境。 建好環境後刪除 src 資料夾不必要的檔案
SimonAllen

Day26 Video.js 播放器

今天到29天都會以 Video.js 播放器為主 Video.js 是一款開源播放器,它是一個經典的 JS 播放器,從2010至今,中間歷經數次版本迭代,目前已到了第7版,這個播放器的特色是: 1. Github 23053 顆星星 2. Plugin 豐富 3. 可透過 Plugin 支援多種格式、協議影片 4. 可在 HTML5、Flash 間切換 5. 文件齊全到過於瑣碎 6. 不少JS播放器在設計上皆受到 Video.js 啟發 原先 Video.js 要播放 Hls 協議影片,需要特別引入 Video.js 的 Hls Plugin
SimonAllen

Day25 react-player

今天來簡介 react-player react-player 是一款強大的 React 播放器元件,雖然名子冠上了「react」-player,但不使用 react 也可以使用此播放器,它的特色有: 1. github 星星 1735 顆 2. 可播放 YouTube、SoundCloud、Facebook、Vimeo、Twitch...等等媒體影片 3. 可播放多種格式、協議影片 4. 不使用 React 也可使用此一播放器 可以玩玩看官方的DEMO 安裝 沒有看到官方的 CDN 連結,這裡一樣用 Node.js 當例子 NPM npm install react-player --save 快速入門:建立 react-player
SimonAllen

Day24 video-react

今天來簡介 video-react video-react 是一款 React 播放器元件,其 UI、Options 皆受到了 video.js 的啟發。 video.js 之後幾天會介紹 video-react的特色有: 1. Github 945 顆星星 2. 以videojs為啟發建立的播放器元件 3. 播放器介面的彈性、元件化 安裝、引入 video-react npm JS的部分,官方網站看起來並無 JS 的 cdn 連結,所以得在Node環境下使用NPM,官方範例 install 是這樣寫: npm install --save video-react react react-dom 但如果你本地已裝完 react、react-dom,或者是用
SimonAllen