不知不覺就完成第二次鐵人賽 這次有幸加入一個公司團隊，前端 team 內有過半的成員參加鐵人賽，雖然前輩喊團報好幾次，但最終大家還是下水餃般的各自報名。我先自首我是拖到最後才報名的 不可否認，當周遭也有夥伴參賽時，對參賽者的動力會有很大的幫助。 賽後檢討 一樣來點賽後檢討 時間分配不均 去年就有的問題，不過今年可用時間和去年不一樣 ( 時間更壓縮 )，雖然在學習、筆記時間的拿捏已經比去年好許多，但仍有調整的空間。 心態調配 主要得面對自己心中的障礙，畢竟去年的這個時候，也是在前公司處理影音相關的任務，說實話有點膩了，

今天的內容仍是 Video.js 如果我想要替 Video.js 影片添加標題文字，例如 Youtube 全螢幕時，左上角會有標題文字一樣，我該怎麼做呢？ 播放器的影片標題和昨天的浮水印一樣，可以透過純 HTML + CSS 來達成，這裡我一樣選擇使用 Videojs plugins 的方式來添加浮水印。 video.js 影片標題套件 ITMAN_

Day28 Video.js 浮水印套件 今天的內容一樣是 Video.js 我們來看看如何替播放器加上浮水印。 這裡的浮水印是添加在播放器上，而不是添加在影片上。所以如果有人寫爬蟲抓走影片片源，影片本身還是不會有水印的。 前端能做的不是改變影片(片源)本身的內容，而是從<vidoe>和其周遭的 HTML 標籤著手，想辦法把水印圖像疊在播放器介面上。 將播放器添加浮水印圖片不外乎是三種方式： 1.

2021年更新： Video.js 文件有更新與 React 整合範例，有加入 使用 useEffect 的寫法。 而除了 Video.js 官方範例外，實務上開發者也會將 Videojs 包成一個自己的 custom hook 再去呼叫，故這篇現在建議看看就好。 今天的內容會用 React + Video.js

今天到29天都會以 Video.js 播放器為主 Video.js 是一款開源播放器，它是一個經典的 JS 播放器，從2010至今，中間歷經數次版本迭代，目前已到了第7版，這個播放器的特色是： 1. Github 23053 顆星星 2. Plugin 豐富 3. 可透過 Plugin 支援多種格式、