1. 視頻封面首幀截取的整體設(shè)計(jì)思路視頻列表里那一排灰撲撲的默認(rèn)播放器圖標(biāo)大概是每個(gè)做過(guò)內(nèi)容平臺(tái)的人都繞不過(guò)去的坎。用戶(hù)上傳完視頻后臺(tái)轉(zhuǎn)碼還沒(méi)跑完前端總得先給個(gè)像樣的封面占位不然整個(gè)列表看起來(lái)就像半成品。用 canvas 截取視頻首幀作為封面就是解決這個(gè)問(wèn)題的經(jīng)典方案——不需要后端參與不需要額外上傳圖片瀏覽器里幾行代碼就能把視頻第一幀畫(huà)面摳出來(lái)變成一張圖。這個(gè)方案的核心邏輯其實(shí)很樸素視頻文件在瀏覽器里加載后通過(guò) video 元素解碼出畫(huà)面再把當(dāng)前幀繪制到 canvas 上最后用 toDataURL 或 toBlob 導(dǎo)出成圖片。聽(tīng)起來(lái)簡(jiǎn)單但真正落地時(shí)會(huì)遇到一堆細(xì)節(jié)問(wèn)題——跨域、黑幀、異步時(shí)序、移動(dòng)端兼容性每一個(gè)都能讓你多調(diào)半天。先說(shuō)清楚這個(gè)方案適合誰(shuí)。如果你是前端開(kāi)發(fā)正在做視頻上傳、內(nèi)容管理、短視頻列表這類(lèi)功能需要在前端快速生成封面預(yù)覽那這套方案直接能用。如果你是完全沒(méi)接觸過(guò) canvas 的新手也不用慌核心代碼不超過(guò)三十行我會(huì)把每一步為什么這么寫(xiě)都講透。如果你已經(jīng)在用類(lèi)似方案但總遇到黑屏或者跨域報(bào)錯(cuò)那正好后面排查部分就是給你準(zhǔn)備的。為什么選 canvas 而不是其他方案有人可能會(huì)想能不能用 CSS 直接把 video 元素當(dāng)封面顯示可以但 video 元素始終是視頻它會(huì)加載、會(huì)緩沖、會(huì)占內(nèi)存一個(gè)列表里放幾十個(gè) video 元素頁(yè)面性能直接崩掉。而 canvas 截出來(lái)的是一張靜態(tài)圖片體積小、渲染快、可以緩存、可以上傳到 CDN這才是封面該有的樣子。另一個(gè)思路是后端用 ffmpeg 截幀這當(dāng)然更穩(wěn)定但需要服務(wù)端資源而且用戶(hù)上傳后要等后端處理完才能看到封面體驗(yàn)上有延遲。前端 canvas 方案的優(yōu)勢(shì)就是即時(shí)性——視頻選完封面立刻出來(lái)用戶(hù)馬上能看到效果。還有一個(gè)容易被忽略的點(diǎn)首幀截取和任意幀截取是兩回事。首幀截取的目標(biāo)是視頻的第一幀畫(huà)面但瀏覽器的 video 元素在 loadedmetadata 階段其實(shí)還沒(méi)有真正解碼出畫(huà)面你必須等到 loadeddata 或者 seek 到某個(gè)時(shí)間點(diǎn)之后才能拿到有效幀。很多人第一次寫(xiě)的時(shí)候在 loadedmetadata 里就去 drawImage結(jié)果截出來(lái)一片黑就是因?yàn)檫@個(gè)時(shí)序問(wèn)題。理解這一點(diǎn)后面很多坑就都能預(yù)判了。2. 核心細(xì)節(jié)解析與實(shí)操要點(diǎn)2.1 video 元素的關(guān)鍵屬性與事件時(shí)序要讓 canvas 截取到正確的首幀你得先搞清楚 video 元素從加載到可繪制經(jīng)歷了哪些階段。這個(gè)過(guò)程不是一步到位的而是分了好幾個(gè)事件節(jié)點(diǎn)每個(gè)節(jié)點(diǎn)能做的事情不一樣。當(dāng)你給 video 元素的 src 賦值后瀏覽器開(kāi)始加載視頻文件。首先觸發(fā)的是 loadedmetadata這時(shí)候?yàn)g覽器已經(jīng)解析了視頻的元信息——時(shí)長(zhǎng)、寬高、編碼格式都知道但畫(huà)面數(shù)據(jù)還沒(méi)解碼出來(lái)。如果你在這個(gè)階段調(diào)用 drawImagecanvas 上畫(huà)出來(lái)的就是空白或者黑色。接下來(lái)是 loadeddata這時(shí)候當(dāng)前幀的數(shù)據(jù)已經(jīng)可用了理論上可以繪制。但實(shí)際測(cè)試下來(lái)loadeddata 觸發(fā)時(shí)當(dāng)前幀往往是第一幀但有些瀏覽器或者某些編碼格式下這個(gè)時(shí)機(jī)仍然可能拿到黑幀。更穩(wěn)妥的做法是監(jiān)聽(tīng) seeked 事件。具體操作是在 loadedmetadata 之后把 video.currentTime 設(shè)置為一個(gè)極小值比如 0.001 秒然后等 seeked 事件觸發(fā)這時(shí)候畫(huà)面一定已經(jīng)解碼完成drawImage 就能拿到有效畫(huà)面。為什么是 0.001 而不是 0因?yàn)槟承g覽器在 currentTime 為 0 時(shí)不會(huì)觸發(fā) seek 操作設(shè)一個(gè)極小值可以強(qiáng)制觸發(fā) seeked 事件確保畫(huà)面已經(jīng)渲染。還有一個(gè)關(guān)鍵屬性是 crossOrigin。如果你的視頻文件和頁(yè)面不同源比如視頻存在 CDN 上那必須給 video 元素設(shè)置 crossOriginanonymous否則 canvas 會(huì)被標(biāo)記為 tainted后續(xù)調(diào)用 toDataURL 或 toBlob 會(huì)直接拋安全錯(cuò)誤。這個(gè)屬性必須在設(shè)置 src 之前就設(shè)好順序反了不生效。另外 preload 屬性建議設(shè)為 auto確保瀏覽器主動(dòng)加載視頻數(shù)據(jù)。如果設(shè)成 none瀏覽器可能不會(huì)主動(dòng)加載事件也不會(huì)觸發(fā)。muted 屬性也建議加上雖然截幀不需要播放但某些瀏覽器對(duì)未靜音的視頻有自動(dòng)播放限制加上 muted 可以避免一些意外情況。2.2 canvas 尺寸計(jì)算與繪制參數(shù)選擇canvas 的尺寸設(shè)置看起來(lái)簡(jiǎn)單但直接決定截出來(lái)的封面質(zhì)量。最直覺(jué)的做法是把 canvas 的 width 和 height 設(shè)成 video 的 videoWidth 和 videoHeight這樣截出來(lái)就是原始分辨率。但實(shí)際業(yè)務(wù)中往往不需要那么大的圖一個(gè)列表封面 400px 寬就夠了截個(gè) 1920px 的圖既浪費(fèi)帶寬又浪費(fèi)內(nèi)存。我的做法是設(shè)一個(gè)目標(biāo)寬度比如 480px然后按視頻的寬高比算出高度。具體計(jì)算是先拿到 video.videoWidth 和 video.videoHeight算出寬高比 ratio videoHeight / videoWidth然后 canvas.width 480canvas.height Math.round(480 * ratio)。這樣截出來(lái)的圖寬度固定高度按比例自適應(yīng)不會(huì)變形。繪制的時(shí)候用 ctx.drawImage(video, 0, 0, canvas.width, canvas.height)。這里第四個(gè)和第五個(gè)參數(shù)是目標(biāo)繪制尺寸不是源尺寸。drawImage 會(huì)自動(dòng)把視頻畫(huà)面縮放到你指定的尺寸。注意不要寫(xiě)成 drawImage(video, 0, 0, video.videoWidth, video.videoHeight)那樣畫(huà)出來(lái)的圖尺寸是原始分辨率和你設(shè)的 canvas 尺寸不匹配會(huì)被裁剪。導(dǎo)出格式方面toDataURL(image/jpeg, 0.8) 是最常用的組合。JPEG 格式體積小0.8 的質(zhì)量系數(shù)在肉眼觀感和文件大小之間平衡得比較好。如果封面需要透明背景那就用 PNG但體積會(huì)大很多。toBlob 比 toDataURL 更適合后續(xù)上傳因?yàn)樗苯咏o你一個(gè) Blob 對(duì)象不用再做 base64 轉(zhuǎn)二進(jìn)制。不過(guò) toBlob 是異步回調(diào)寫(xiě)法上要注意。提示canvas 的 width 和 height 屬性是繪圖緩沖區(qū)尺寸CSS 的 width 和 height 是顯示尺寸兩者不要混淆。截幀時(shí)只需要設(shè)屬性尺寸不需要設(shè) CSS 尺寸。2.3 跨域問(wèn)題的根源與解決路徑跨域是 canvas 截視頻幀最容易翻車(chē)的地方。根本原因在于瀏覽器的同源策略當(dāng) video 元素的源和頁(yè)面不同源時(shí)視頻數(shù)據(jù)被視為跨域資源繪制到 canvas 后canvas 會(huì)被標(biāo)記為 tainted被污染此時(shí)任何試圖讀取 canvas 像素?cái)?shù)據(jù)的操作——包括 toDataURL、toBlob、getImageData——都會(huì)拋出 SecurityError。解決路徑有兩條。第一條是讓視頻源支持 CORS。具體來(lái)說(shuō)視頻服務(wù)器需要在響應(yīng)頭里加上 Access-Control-Allow-Origin同時(shí)前端給 video 元素設(shè)置 crossOriginanonymous。這兩者缺一不可。如果服務(wù)器沒(méi)配 CORS 頭前端設(shè)了 crossOrigin 反而會(huì)導(dǎo)致視頻加載失敗。所以這條路徑需要后端配合不是前端單方面能搞定的。第二條路徑是走同源代理。如果視頻源不受你控制沒(méi)法加 CORS 頭那可以在自己的服務(wù)器上做一個(gè)代理接口把視頻流轉(zhuǎn)發(fā)一遍讓前端從同源地址加載視頻。這樣就不存在跨域問(wèn)題canvas 也不會(huì)被污染。代價(jià)是服務(wù)器要承擔(dān)流量適合視頻量不大的場(chǎng)景。實(shí)際項(xiàng)目中我一般優(yōu)先走第一條路徑因?yàn)楝F(xiàn)在主流對(duì)象存儲(chǔ)和 CDN 都支持配置 CORS 規(guī)則加一個(gè)響應(yīng)頭的事。如果實(shí)在搞不定再考慮代理方案。需要注意的是crossOrigin 屬性必須在設(shè)置 src 之前賦值順序反了瀏覽器不會(huì)重新發(fā)起帶 CORS 的請(qǐng)求。3. 完整實(shí)操流程與核心代碼實(shí)現(xiàn)3.1 從零搭建截幀工具函數(shù)下面這套代碼是我在實(shí)際項(xiàng)目中反復(fù)打磨過(guò)的版本處理了時(shí)序、跨域、尺寸、異常等各個(gè)細(xì)節(jié)。你可以直接復(fù)制到項(xiàng)目里用也可以按自己的需求調(diào)整參數(shù)。function captureVideoFirstFrame(videoUrl, options {}) { const { targetWidth 480, quality 0.8, format image/jpeg, timeout 10000 } options; return new Promise((resolve, reject) { const video document.createElement(video); video.crossOrigin anonymous; video.preload auto; video.muted true; video.playsInline true; let settled false; const timer setTimeout(() { if (!settled) { settled true; cleanup(); reject(new Error(截幀超時(shí))); } }, timeout); function cleanup() { clearTimeout(timer); video.removeAttribute(src); video.load(); } video.addEventListener(loadedmetadata, () { // 強(qiáng)制 seek 到極小時(shí)間點(diǎn)確保畫(huà)面解碼完成 video.currentTime 0.001; }); video.addEventListener(seeked, () { if (settled) return; try { const ratio video.videoHeight / video.videoWidth; const canvas document.createElement(canvas); canvas.width targetWidth; canvas.height Math.round(targetWidth * ratio); const ctx canvas.getContext(2d); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); canvas.toBlob( (blob) { if (settled) return; settled true; cleanup(); if (blob) { resolve({ blob, dataUrl: canvas.toDataURL(format, quality), width: canvas.width, height: canvas.height }); } else { reject(new Error(封面生成失敗)); } }, format, quality ); } catch (err) { settled true; cleanup(); reject(err); } }); video.addEventListener(error, () { if (settled) return; settled true; cleanup(); reject(new Error(視頻加載失敗)); }); video.src videoUrl; }); }這段代碼有幾個(gè)設(shè)計(jì)決策值得展開(kāi)說(shuō)。第一用 Promise 封裝是因?yàn)檎麄€(gè)流程是異步的而且有多個(gè)可能的失敗點(diǎn)Promise 的 reject 能統(tǒng)一處理錯(cuò)誤。第二加了超時(shí)機(jī)制因?yàn)榫W(wǎng)絡(luò)異常時(shí) video 的 error 事件不一定觸發(fā)沒(méi)有超時(shí)的話(huà) Promise 可能永遠(yuǎn) pending。第三cleanup 函數(shù)里把 video 的 src 移除并調(diào)用 load()這是為了釋放視頻資源避免內(nèi)存泄漏。第四seek 到 0.001 而不是 0前面解釋過(guò)是為了確保 seeked 事件觸發(fā)。3.2 在真實(shí)上傳流程中集成截幀單獨(dú)一個(gè)截幀函數(shù)還不夠?qū)嶋H業(yè)務(wù)中它通常是上傳流程的一環(huán)。用戶(hù)選完視頻文件后你需要先用 URL.createObjectURL 生成本地預(yù)覽地址然后截幀再把封面和視頻一起上傳。async function handleVideoSelect(file) { // 生成本地預(yù)覽地址 const objectUrl URL.createObjectURL(file); try { // 截取首幀 const cover await captureVideoFirstFrame(objectUrl, { targetWidth: 480, quality: 0.8 }); // 展示封面預(yù)覽 previewImg.src cover.dataUrl; // 上傳視頻和封面 const formData new FormData(); formData.append(video, file); formData.append(cover, cover.blob, cover.jpg); const res await fetch(/api/upload, { method: POST, body: formData }); const result await res.json(); console.log(上傳成功, result); } catch (err) { console.error(處理失敗, err); // 降級(jí)使用默認(rèn)封面 previewImg.src /assets/default-cover.png; } finally { // 釋放 objectURL URL.revokeObjectURL(objectUrl); } }這里有個(gè)關(guān)鍵點(diǎn)URL.createObjectURL 生成的地址是同源的 blob 地址不存在跨域問(wèn)題canvas 不會(huì)被污染。所以本地文件截幀是最順暢的場(chǎng)景。如果你截的是遠(yuǎn)程視頻地址那就要面對(duì)前面說(shuō)的跨域問(wèn)題。另一個(gè)細(xì)節(jié)是 finally 里的 revokeObjectURL。objectURL 不釋放的話(huà)對(duì)應(yīng)的 Blob 數(shù)據(jù)會(huì)一直占著內(nèi)存用戶(hù)連續(xù)選幾個(gè)大視頻內(nèi)存就上去了。這個(gè)釋放操作很容易被忘記但養(yǎng)成習(xí)慣就好。3.3 參數(shù)調(diào)優(yōu)與不同場(chǎng)景的適配targetWidth 設(shè)多少合適這取決于你的使用場(chǎng)景。列表頁(yè)的小縮略圖240px 到 320px 就夠了。詳情頁(yè)的大封面640px 到 960px 比較合適。如果是視頻管理后臺(tái)可能需要 480px 左右的中等尺寸。我的經(jīng)驗(yàn)是設(shè)一個(gè)比實(shí)際顯示尺寸大 1.5 到 2 倍的寬度這樣在高分屏上也不會(huì)模糊。quality 參數(shù)只對(duì) JPEG 和 WebP 有效范圍是 0 到 1。0.8 是通用推薦值0.6 以下會(huì)有明顯壓縮痕跡0.9 以上文件體積增長(zhǎng)很快但畫(huà)質(zhì)提升有限。如果封面文字比較多可以適當(dāng)提高到 0.85。format 的選擇上JPEG 適合大多數(shù)場(chǎng)景WebP 體積更小但兼容性稍差不過(guò)現(xiàn)在主流瀏覽器都支持了PNG 只在需要透明通道時(shí)使用。實(shí)際項(xiàng)目中我一般用 JPEG兼容性和體積平衡得最好。超時(shí)時(shí)間設(shè)多少本地文件截幀通常幾百毫秒就完成了遠(yuǎn)程視頻取決于網(wǎng)絡(luò)速度。10 秒是個(gè)比較安全的默認(rèn)值如果視頻特別大或者網(wǎng)絡(luò)特別慢可以適當(dāng)延長(zhǎng)。但也不宜太長(zhǎng)否則用戶(hù)等太久體驗(yàn)不好。4. 常見(jiàn)問(wèn)題與排查技巧實(shí)錄4.1 截出來(lái)是黑屏的幾種原因黑屏是最高頻的問(wèn)題沒(méi)有之一。我遇到過(guò)的情況大概分三類(lèi)。第一類(lèi)是時(shí)序問(wèn)題在 loadedmetadata 階段就 drawImage畫(huà)面還沒(méi)解碼自然是黑的。解決辦法就是等 seeked 事件或者至少等 loadeddata。這個(gè)前面已經(jīng)詳細(xì)講過(guò)。第二類(lèi)是視頻編碼格式問(wèn)題。某些視頻的編碼格式瀏覽器不支持解碼video 元素能加載元信息但畫(huà)不出畫(huà)面。這種情況可以通過(guò) video.canPlayType 提前檢測(cè)或者監(jiān)聽(tīng) error 事件做降級(jí)處理。實(shí)測(cè)下來(lái) H.264 編碼的 MP4 兼容性最好HEVC 和 AV1 在部分瀏覽器上支持不完整。第三類(lèi)是 seek 時(shí)間點(diǎn)的問(wèn)題。有些視頻的第一幀本身就是黑場(chǎng)比如淡入效果的開(kāi)頭那截出來(lái)就是黑的。這種情況可以把 currentTime 往后調(diào)一點(diǎn)比如設(shè)成 0.1 秒或者視頻時(shí)長(zhǎng)的 1%避開(kāi)黑場(chǎng)。但要注意別調(diào)太多否則就不是首幀了。排查的時(shí)候可以用一個(gè)簡(jiǎn)單的方法把 video 元素直接掛到頁(yè)面上加 controls 屬性手動(dòng)播放看看第一幀到底長(zhǎng)什么樣。如果手動(dòng)播放能看到畫(huà)面但截幀是黑的那就是時(shí)序或代碼問(wèn)題如果手動(dòng)播放也是黑的那就是視頻本身或編碼的問(wèn)題。4.2 跨域報(bào)錯(cuò)的具體表現(xiàn)與處理跨域問(wèn)題的報(bào)錯(cuò)信息很明確Uncaught DOMException: Failed to execute toDataURL on HTMLCanvasElement: Tainted canvases may not be exported. 看到這個(gè)報(bào)錯(cuò)基本就是跨域沒(méi)處理對(duì)。排查步驟是這樣的先確認(rèn) video 元素的 crossOrigin 屬性是否設(shè)置且是否在 src 之前設(shè)置。然后打開(kāi)瀏覽器開(kāi)發(fā)者工具的 Network 面板看視頻請(qǐng)求的響應(yīng)頭里有沒(méi)有 Access-Control-Allow-Origin。如果請(qǐng)求頭里沒(méi)有那就是服務(wù)端沒(méi)配 CORS需要后端加。如果請(qǐng)求頭里有但前端還是報(bào)錯(cuò)檢查 crossOrigin 的值是不是 anonymous寫(xiě)成 use-credentials 的話(huà)需要服務(wù)端額外支持 credentials。還有一種隱蔽的情況視頻請(qǐng)求被重定向了重定向后的響應(yīng)沒(méi)有 CORS 頭。這種情況在 CDN 配置不當(dāng)時(shí)會(huì)出現(xiàn)需要在 Network 面板里仔細(xì)看每一條請(qǐng)求。如果服務(wù)端實(shí)在加不了 CORS 頭降級(jí)方案是用同源代理。在自己的服務(wù)器上開(kāi)一個(gè)接口把視頻流轉(zhuǎn)發(fā)一遍。前端從同源地址加載就不存在跨域問(wèn)題了。這個(gè)方案會(huì)增加服務(wù)器帶寬消耗適合視頻量不大的場(chǎng)景。4.3 移動(dòng)端兼容性注意事項(xiàng)移動(dòng)端瀏覽器對(duì) video 元素的處理比桌面端更嚴(yán)格。iOS Safari 有幾個(gè)特殊限制video 元素默認(rèn)不加載數(shù)據(jù)必須用戶(hù)交互后才開(kāi)始加載playsInline 屬性必須設(shè)置否則視頻會(huì)全屏播放某些 iOS 版本對(duì) crossOrigin 的支持也有差異。實(shí)測(cè)下來(lái)iOS 上截幀的成功率比 Android 和桌面端低一些。主要問(wèn)題是 seeked 事件有時(shí)候不觸發(fā)或者觸發(fā)時(shí)畫(huà)面還沒(méi)準(zhǔn)備好。應(yīng)對(duì)方法是在 seeked 之后加一個(gè)小的延遲比如 requestAnimationFrame 或者 setTimeout 100ms再執(zhí)行 drawImage。這個(gè)延遲雖然不優(yōu)雅但確實(shí)能提高成功率。Android 上的問(wèn)題主要是碎片化不同廠商的瀏覽器對(duì)視頻編碼的支持不一樣。建議在截幀失敗時(shí)做好降級(jí)顯示一個(gè)默認(rèn)封面不要讓用戶(hù)看到空白。還有一個(gè)移動(dòng)端特有的問(wèn)題內(nèi)存限制。移動(dòng)端瀏覽器對(duì) canvas 的尺寸有限制太大的 canvas 會(huì)創(chuàng)建失敗。所以 targetWidth 不要設(shè)太大480px 在移動(dòng)端已經(jīng)足夠了。如果確實(shí)需要大圖可以分塊繪制或者用 OffscreenCanvas。4.4 常見(jiàn)問(wèn)題速查表問(wèn)題現(xiàn)象可能原因排查方法解決方案截出來(lái)全黑時(shí)序不對(duì)畫(huà)面未解碼檢查 drawImage 調(diào)用時(shí)機(jī)等 seeked 事件后再繪制截出來(lái)全黑視頻首幀本身是黑場(chǎng)手動(dòng)播放查看第一幀currentTime 往后調(diào)一點(diǎn)截出來(lái)全黑編碼格式不支持檢查 video.canPlayType轉(zhuǎn)碼或降級(jí)處理toDataURL 報(bào)錯(cuò)canvas 被跨域污染檢查 Network 面板 CORS 頭配置 CORS 或走同源代理視頻加載失敗crossOrigin 設(shè)置順序錯(cuò)誤檢查屬性賦值順序crossOrigin 必須在 src 之前截幀超時(shí)網(wǎng)絡(luò)慢或視頻大檢查 Network 加載時(shí)間延長(zhǎng)超時(shí)或降級(jí)移動(dòng)端截幀失敗iOS 限制或內(nèi)存不足真機(jī)調(diào)試查看報(bào)錯(cuò)加延遲或減小 canvas 尺寸封面模糊targetWidth 太小對(duì)比顯示尺寸提高到顯示尺寸的 1.5 到 2 倍4.5 幾個(gè)我踩過(guò)的坑和對(duì)應(yīng)技巧第一個(gè)坑是忘記釋放 objectURL。早期做上傳功能時(shí)沒(méi)注意用戶(hù)連續(xù)選了十幾個(gè)視頻后頁(yè)面直接卡死排查半天才發(fā)現(xiàn)是 objectURL 沒(méi)釋放導(dǎo)致內(nèi)存暴漲。后來(lái)養(yǎng)成習(xí)慣只要用了 createObjectURL就在 finally 里 revoke 掉。第二個(gè)坑是 canvas 尺寸設(shè)成了 video 的原始尺寸。有個(gè)項(xiàng)目上傳的是 4K 視頻canvas 設(shè)成 3840x2160結(jié)果在低端機(jī)上直接創(chuàng)建失敗。后來(lái)改成固定寬度 480px問(wèn)題解決。封面圖根本不需要原始分辨率按顯示需求設(shè)尺寸就行。第三個(gè)坑是沒(méi)做超時(shí)處理。有次線上環(huán)境視頻加載特別慢截幀的 Promise 一直 pending用戶(hù)界面卡在 loading 狀態(tài)。后來(lái)加了超時(shí)機(jī)制超時(shí)后走降級(jí)顯示默認(rèn)封面體驗(yàn)好很多。第四個(gè)坑是忽略了視頻旋轉(zhuǎn)信息。手機(jī)拍的視頻有時(shí)候帶有旋轉(zhuǎn)元數(shù)據(jù)video 元素播放時(shí)會(huì)自動(dòng)旋轉(zhuǎn)但 canvas 繪制時(shí)不一定應(yīng)用這個(gè)旋轉(zhuǎn)。結(jié)果截出來(lái)的封面是橫著的。解決辦法是讀取視頻的旋轉(zhuǎn)角度在 canvas 上做對(duì)應(yīng)的旋轉(zhuǎn)繪制。不過(guò)這個(gè)情況比較少見(jiàn)大部分視頻上傳前都會(huì)被處理過(guò)。注意截幀操作會(huì)消耗 CPU 和內(nèi)存如果列表頁(yè)需要批量截幀建議加并發(fā)控制比如同時(shí)只處理 2 到 3 個(gè)視頻避免頁(yè)面卡頓。5. 性能優(yōu)化與進(jìn)階擴(kuò)展思路5.1 批量截幀的并發(fā)控制與緩存策略列表頁(yè)如果有幾十個(gè)視頻需要截幀不加控制地同時(shí)處理會(huì)直接把瀏覽器卡死。每個(gè) video 元素解碼都要占 CPU每個(gè) canvas 都要占內(nèi)存并發(fā)數(shù)太高的話(huà)低端設(shè)備直接崩潰。我的做法是做一個(gè)簡(jiǎn)單的任務(wù)隊(duì)列控制同時(shí)處理的視頻數(shù)量不超過(guò) 3 個(gè)。每完成一個(gè)就從隊(duì)列里取下一個(gè)直到全部處理完。這樣既能利用多核 CPU 的并行能力又不會(huì)把資源耗盡。class CaptureQueue { constructor(concurrency 3) { this.concurrency concurrency; this.running 0; this.queue []; } add(task) { return new Promise((resolve, reject) { this.queue.push({ task, resolve, reject }); this.next(); }); } next() { if (this.running this.concurrency || this.queue.length 0) { return; } this.running; const { task, resolve, reject } this.queue.shift(); task() .then(resolve) .catch(reject) .finally(() { this.running--; this.next(); }); } }緩存策略也很重要。同一個(gè)視頻不需要重復(fù)截幀截過(guò)一次就把結(jié)果存起來(lái)。可以用 Map 以視頻 URL 為 key 緩存結(jié)果或者存到 IndexedDB 里做持久化緩存。這樣用戶(hù)刷新頁(yè)面或者重新進(jìn)入列表時(shí)直接讀緩存不用重新截。5.2 用 OffscreenCanvas 提升渲染性能OffscreenCanvas 是較新的 API可以在 Web Worker 里進(jìn)行 canvas 繪制不阻塞主線程。對(duì)于批量截幀場(chǎng)景用 OffscreenCanvas 能明顯提升頁(yè)面流暢度。不過(guò) OffscreenCanvas 的兼容性還不是特別完美而且 video 元素本身不能直接在 Worker 里創(chuàng)建需要配合 ImageBitmap 或者 VideoFrame 使用。實(shí)現(xiàn)起來(lái)比主線程方案復(fù)雜一些適合對(duì)性能要求很高的場(chǎng)景。如果只是偶爾截幾個(gè)封面主線程方案完全夠用。5.3 封面截取之外的擴(kuò)展玩法首幀截取只是最基礎(chǔ)的需求實(shí)際業(yè)務(wù)中可能還有更多玩法。比如讓用戶(hù)從視頻的多個(gè)時(shí)間點(diǎn)選擇封面這就需要截取任意幀。實(shí)現(xiàn)思路和首幀類(lèi)似只是把 currentTime 設(shè)成用戶(hù)選擇的時(shí)間點(diǎn)等 seeked 后繪制。還可以做智能封面選擇通過(guò)分析視頻前幾秒的畫(huà)面自動(dòng)選一張最清晰的、人臉最多的、或者色彩最豐富的幀作為封面。這需要引入一些圖像分析算法復(fù)雜度高不少但效果確實(shí)更好。另一個(gè)擴(kuò)展方向是封面編輯截出來(lái)的封面允許用戶(hù)裁剪、加文字、加濾鏡。這些操作都可以在 canvas 上完成截幀只是第一步后續(xù)的編輯能力才是完整的產(chǎn)品體驗(yàn)。5.4 服務(wù)端兜底方案的設(shè)計(jì)前端截幀雖然方便但總有失敗的時(shí)候——瀏覽器不支持、視頻格式特殊、網(wǎng)絡(luò)異常等等。所以服務(wù)端兜底是必要的。我的做法是前端截幀成功后把封面一起上傳如果前端截幀失敗就上傳一個(gè)標(biāo)記后端收到標(biāo)記后用 ffmpeg 截幀生成封面。這樣既保證了大多數(shù)情況下的即時(shí)體驗(yàn)又確保了極端情況下封面不會(huì)缺失。后端 ffmpeg 截幀的命令大概是這樣的ffmpeg -i input.mp4 -vf selecteq(n\,0) -vframes 1 -q:v 2 cover.jpg這條命令的意思是選取第 0 幀輸出一幀畫(huà)面質(zhì)量等級(jí) 2范圍 1 到 31值越小質(zhì)量越高。如果首幀是黑場(chǎng)可以把 select 條件改成選取第 10 幀或者按時(shí)間選取。前后端配合的完整流程是前端截幀成功則上傳封面失敗則上傳空標(biāo)記后端收到視頻后檢查是否有封面沒(méi)有就用 ffmpeg 補(bǔ)上。這樣無(wú)論前端環(huán)境如何最終每個(gè)視頻都有封面。6. 一些實(shí)際項(xiàng)目中的經(jīng)驗(yàn)體會(huì)這套方案我在幾個(gè)內(nèi)容管理項(xiàng)目里都用過(guò)整體穩(wěn)定性不錯(cuò)但每次都會(huì)遇到一些新的邊界情況。最深的體會(huì)是截幀這件事代碼本身不復(fù)雜復(fù)雜的是各種環(huán)境差異和異常處理。把超時(shí)、降級(jí)、跨域、移動(dòng)端兼容這些邊角都處理好代碼量會(huì)比核心邏輯多好幾倍但正是這些邊角決定了功能能不能真正上線用。另一個(gè)體會(huì)是關(guān)于用戶(hù)體驗(yàn)的。截幀需要時(shí)間哪怕只有幾百毫秒用戶(hù)也能感知到。所以界面上要有 loading 狀態(tài)不要讓用戶(hù)覺(jué)得卡住了。截幀失敗時(shí)要有降級(jí)方案顯示默認(rèn)封面比顯示空白好得多。如果截幀時(shí)間超過(guò)一兩秒可以考慮先顯示一個(gè)模糊的占位圖等截幀完成再替換。最后分享一個(gè)小技巧如果視頻本身有 poster 屬性或者后端已經(jīng)生成了封面優(yōu)先用現(xiàn)成的封面截幀只作為兜底。這樣既省性能又保證質(zhì)量。截幀方案最大的價(jià)值在于沒(méi)有封面時(shí)能快速生成一個(gè)而不是替代所有封面來(lái)源。把這個(gè)定位搞清楚方案的設(shè)計(jì)和取舍就清晰了。