我自己是程序猿，凡是重復(fù)性的工作，總想著用代碼解決。

又因?yàn)閷?Unity / 虛幻 / Cocos2D 等業(yè)內(nèi)標(biāo)準(zhǔn)軟件不熟悉，因此對 “如何用代碼控制生成視頻” 這個問題，頭疼了很久。

昨晚，我想上傳一張 CD 專輯到 B 站，又想制作一個簡單的能顯示播放進(jìn)度的視頻，再次遇到了這個問題。

經(jīng)過一番思考后，仿佛龍場悟道一般，我突然想到了一個簡單可行的方案:

用 HTML 實(shí)現(xiàn)動態(tài)效果，然后用 OBS “瀏覽器源” 捕捉并錄制

最終效果居然非常不錯，超乎我的想象。

演示視頻

演示代碼地址

https://guoyk93.github.io/demo-cgv/

億點(diǎn)點(diǎn)細(xì)節(jié)

1. 為了增加 OBS 錄制效率，HTML 寫的進(jìn)度展示使用了十倍速，后期在視頻剪輯軟件里面放慢。

2. 使用 async/await 語法寫定時代碼，可以避免陷入 setTimeout 回調(diào)地獄。