js前端获取video视频名称+时长+缩略图+宽高,缩略图的核心是用canvas画出来的base64图片,调用函数需要传入二进制的视频文件,注意这是一个promise函数,需要用then来接收,代码如下文章来源地址https://www.toymoban.com/news/detail-523130.html
// 调用
asyncImgChecked(file).then(res=>{
console.log(res)
})
// 获取视频标题+时长+缩略图+宽高
asyncImgChecked(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.readAsDataURL(file.raw); // 必须用file.raw
reader.onload = ()=> { // 让页面中的img标签的src指向读取的路径
let video = document.createElement('video');
video.src = reader.result;
video.currentTime = 3; //截取缩略图时的视频时长,一定要设置,不然大概率白屏
video.oncanplay = ()=>{
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.setAttribute("width",100);
canvas.setAttribute("height",100);
video.setAttribute('width', 100);
video.setAttribute('height', 100);
ctx.drawImage(video, 0, 0, video.width, video.height);
const imgSrc = canvas.toDataURL('image/png');
resolve({
duration:parseInt(video.duration % 60),//得到整数的视频时长
imgSrc,//base64的缩略图图片路径
width:video.videoWidth,
height:video.videoHeight,
videoName:file.name
})
}
};
})
},
文章来源:https://www.toymoban.com/news/detail-523130.html
到了这里,关于js前端获取video视频名称+时长+缩略图+宽高的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!