this.url = "https://xxx.com/video/demo.mp4"
1.把视频放进canvas,在通过canvas 拿到视频的第一帧。
var cut = function() { 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);//将视频此刻帧数画入画布 let img = document.createElement("img"); img.src = canvas.toDataURL("image/png"); Dom.appendChild(img);//写入到Dom }; video.addEventListener('loadeddata',cut);//在视频帧数已加载时执行截取
2.通过拼接属性获取视频首帧图片
this.cover = this.videoUrl + "?x-oss-process=video/snapshot,t_1,m_fast"
this.videoCover 就直接可以在vue里作为封面来用。
标签:视频,canvas,img,首帧,截取,video From: https://www.cnblogs.com/coder-Fish/p/17866495.html