javascript获取video视频某一帧作为poster封面图片

HTML标签Video的poster属性可以给视频添加一个图片作为视频未开始播放时的封面，但如果不想单独添加图片，也可以通过代码利于canvas获取视频的某一帧作为封面图片。

HTML代码：

<video  
	id="cvideo"                        
	src="upload/video.mp4"          
	webkit-playsinline="true" 
	playsinline="true" 
	x5-video-player-type="h5" 
	x5-video-player-fullscreen="true"
	x-webkit-airplay="allow" 
	x5-video-orientation="portraint" 
	crossorigin='anonymous'
>               
</video>     
<img id="videoimg"></img>

crossorigin='anonymous'的作用是解决视频资源跨域导致画布污染的问题

JS代码：

function videoPoster() {       
    let video = document.getElementById('cvideo')
    video.currentTime = 2; //视频的第2秒画面的那一帧
    video.oncanplay = () => {
        let canvas = document.createElement('canvas'); //创建画布
        let ctx = canvas.getContext('2d');
        canvas.width = video.clientWidth; //视频的宽
        canvas.height = video.clientHeight; //视频的高
        ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
        let imgUrl = canvas.toDataURL("image/png");
		document.getElementById('videoimg').src = imgUrl
    }
}
videoPoster();

注意：

如果需要截图第2帧以上则需要在video.oncanplay()方法中进行截图。

base64图片可以提高浏览器的流畅性。

而且为了避免画布被污染和跨域等问题，在canvas画布中进行绘制图片时，最好先将图片img标签转换为base64之后进行drawImage()。