PC端
如果只有pc端的需求彼妻，那么可以直接利用loadeddata方法截取視頻內(nèi)容
const canvas = document.createElement('canvas');
const video = document.getElementById('video');
video.setAttribute('crossOrigin', 'anonymous'); // 添加跨域標(biāo)識(shí)肉津，否則canvas轉(zhuǎn)圖報(bào)錯(cuò)
video.currentTime = 1; // 不設(shè)置會(huì)導(dǎo)致進(jìn)度為0，截取空白內(nèi)容
const { clientWidth, clientHeight } = video
canvas.width = clientWidth;
canvas.height = clientHeight;
video.onloadeddata = (() => {
canvas.getContext('2d').drawImage(video, 0, 0, clientWidth, clientHeight);
const dataURL = canvas.toDataURL('image/png');
video.setAttribute("poster", dataURL); // 設(shè)置canvas轉(zhuǎn)化后的圖片為封面
})
移動(dòng)端
但是在移動(dòng)端洛二，loadeddata方法只有在視頻播放時(shí)才會(huì)被調(diào)用馋劈。嘗試以下方式，仍是無(wú)效晾嘶。
- 在加載完節(jié)點(diǎn)后手動(dòng)調(diào)用該方法妓雾，但是拿到的仍是空白頁(yè)面。
- 添加屬性autoplay為true变擒，無(wú)效君珠。
- 手動(dòng)調(diào)用play方法再贊同，無(wú)效娇斑。瀏覽器已經(jīng)不支持在移動(dòng)端默認(rèn)播放視頻了策添，所以強(qiáng)制調(diào)用只會(huì)報(bào)錯(cuò)材部。
所以，咱得借助第三方唯竹。
src = `${videoSrc}?ci-process=snapshot&time=0.01`
src = `${videoSrc}?x-oss-process=video/snapshot,t_50000,f_jpg,w_800,h_600`
- 七牛云
src = `${videoSrc}?vframe/jpg/offset/0`
如果你的視頻存儲(chǔ)在其他云平臺(tái)乐导，也可以到對(duì)應(yīng)平臺(tái)查看是否有方法可以直接獲取
