概述
1.做項(xiàng)目的時(shí)候突然想截取視頻第一幀，作為視頻的封面，然后搜了很多博客都發(fā)現(xiàn)得到空白的圖片，最后得到了解決。
2.方法：通過創(chuàng)建canvas標(biāo)簽，利用其drawImage() 方法在畫布上繪制該視頻，然后運(yùn)用toDataURL方法轉(zhuǎn)換canvas上的圖片為base64格式，并將base64格式的圖片作為video標(biāo)簽的poster屬性。
3.瀏覽器：chrome
代碼關(guān)鍵
video.currentTime = 1
currentTime 屬性設(shè)置或返回視頻播放的當(dāng)前位置（以秒計(jì)）。當(dāng)設(shè)置該屬性時(shí)，播放會(huì)跳躍到指定的位置。一定要設(shè)置該屬性，不然會(huì)得到空白的圖片。
知識(shí)點(diǎn)
video.onloadeddata
onloadeddata 事件在當(dāng)前幀的數(shù)據(jù)加載完成且還沒有足夠的數(shù)據(jù)播放視頻/音頻（audio/video）的下一幀時(shí)觸發(fā)。在當(dāng)前幀的數(shù)據(jù)可用時(shí)執(zhí)行相應(yīng) JavaScript代碼。
canvas.toDataURL
是返回一個(gè)包含圖片展示的 數(shù)據(jù)URL?？梢允褂?type 參數(shù)其類型，默認(rèn)為 PNG 格式。圖片的分辨率為96dpi。文章來源：http://www.zghlxwxcb.cn/news/detail-422136.html
video.setAttribute(‘crossOrigin’, ‘a(chǎn)nonymous’)
canvas無法對(duì)跨域的圖片進(jìn)行操作，這樣解決了跨域問題。文章來源地址http://www.zghlxwxcb.cn/news/detail-422136.html
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>capture screen</title>
</head>
<body>
<video id="video" controls="controls">
<source src="./0130_1.mp4">
</video>
<div id="output"></div>
<script type="text/javascript">
(function(){
var video, output;
output = document.getElementById("output");
var canvas = document.createElement('canvas')
var img = document.createElement("img");
video = document.getElementById('video')
video.setAttribute('crossOrigin', 'anonymous')
video.currentTime = 1
canvas.width = video.clientWidth
canvas.height = video.clientHeight
video.onloadeddata = (() => {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
var dataURL = canvas.toDataURL('image/png')
img.src = dataURL;
img.width = 400;
img.height = 300;
output.appendChild(img);
})
})();
</script>
</body>
</html>
到了這里，關(guān)于前端截取視頻第一幀作為封面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
