<video width="320" height="240" controls id="upvideo"></video>
// 获取视频第一帧图片
getVideoBase64(url) {
return new Promise(function(resolve, reject) {
let dataURL = "";
let video = document.createElement("video");
video.setAttribute("crossOrigin", "anonymous"); //处理跨域
video.setAttribute("src", url);
video.setAttribute("width", 400);
video.setAttribute("height", 240);
video.setAttribute("preload", "auto");
video.addEventListener("loadeddata", function() {
let canvas = document.createElement("canvas"),
width = video.width, //canvas的尺寸和图片一样
height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
resolve(dataURL);
});
});
},
// videoSrc为视频路径,dataURL就是取到的图片了
let dataURL = this.getVideoBase64(this.videoSrc);
// 取视频第一帧作为封面
findvideocover(url) {
let _this = this;
this.$nextTick(() => {
let video = document.getElementById("upvideo");
let source = document.createElement("source");
source.src = url;
source.type = "video/mp4";
video.appendChild(source);
video.addEventListener("loadeddata", function() {
var canvas = document.createElement("canvas");
canvas.width = "320";
canvas.height = "320";
canvas
.getContext("2d")
.drawImage(video, 0, 0, canvas.width, canvas.width);
// var img = document.createElement("img");
// let imgsrc = canvas.toDataURL("image/png");
// console.log(_this.imgUrl)
// _this.Videoframehandle(imgsrc.split(",")[1]);
});
});
},
// 再mounted里面直接调用 this.findvideocover(this.videoSrc)
取第一帧作为视频封面,获取视频第一帧图片
最新推荐文章于 2024-08-07 16:41:51 发布