PS：獲取封面前提是瀏覽器要支持視頻編碼格式，不支持就不能通過該方式獲取
讀取視頻封面：
let video = document.createElement("video");
video.src = videosrc;
video.currentTime= 10 // 可能出現(xiàn)黑屏，從10幀
video.muted = true; // 解決個(gè)別電腦獲取到空圖
video.autoplay = true; // 解決個(gè)別電腦獲取到空圖
video.preload = true; // 解決個(gè)別電腦獲取到空圖
video.addEventListener('loadeddata', async () => {
video.pause();
var canvas = document.createElement('canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
const cover = canvas.toDataURL('image/png')
console.log('圖片base64是：'，cover)
video.remove();
}}
base64轉(zhuǎn)file：文章來源：http://www.zghlxwxcb.cn/news/detail-582954.html
const convertFile = base64 => {
let fileArray = base64.split(','),
fileType = fileArray[0].match(/:(.*?);/)[1],
bstr = atob(fileArray[1]),
n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], '文件名', { type: fileType })
}
下載：文章來源地址http://www.zghlxwxcb.cn/news/detail-582954.html
const buttonClick = (base64) => {
let file = convertFile(base64)
const node = document.createElement('a')
node.href = URL.createObjectURL(file)
node.download = file.name
node.click()
URL.revokeObjectURL(node.href)
document.body.appendChild(node)
document.body.removeChild(node)
}
到了這里，關(guān)于canvas獲取視頻封面及個(gè)別電腦獲取到空圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
