html5视频添加封面,HTML5 video截取视频封面图片播放代码

使用方法：

1、head引入css部分

.video-con{ width: 300px; height: 150px; position: relative; margin-bottom: 20px;}

.video-con .video{ width: 100%; height: 100%;}

.video-con .btn{ width: 64px; height: 64px; background: transparent url("img/play-btn.png") no-repeat;

position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: none;

}

.video-con .btn.pause{ background-image: url("img/pause-btn.png");}

2、body引入HTML代码

// 视频------视频截图 ~~ 视频播放状态 ~~

const setMedia = function(video, scale = 0.8) {

// 设置poster属性：(非本地视频资源会有跨域截图问题)

video.addEventListener('loadeddata', function(e) {

// 拿到图片

let canvas = document.createElement('canvas');

canvas.width = video.videoWidth * scale;

canvas.height = video.videoHeight * scale;

canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);