项目中如何使用原生js实现上传视频并且获取到视频尺寸宽高 、视频时长、尺寸比例及分辨率等
原生js实现上传视频/音频获取尺寸宽高 、视频时长、尺寸比例及分辨率
1.使用onchange方法进行获取上传内容
<input type="file" onchange="changeFile(event)" /> 复制代码
2.在js中定义onchange方法
由于 checkSizes 是延迟执行所以需要同步
async function changeFile(e) { console.log(e) let files = e.target.files console.log(files) // await checkSize(files,true--> 为音频是使用 默认为false), '返回值、里面有 （尺寸宽 --- 分辨率） 尺寸高 视频时长 1 表示1秒 尺寸比例 [16,9]'; let checkSizes if (files[0].type == "audio/mpeg") { checkSizes = await checkSize(files, true) } else if (files[0].type == "video/mp4") { checkSizes = await checkSize(files) } console.log(checkSizes) if (checkSizes.duration > 300) { console.log('视频上传时间不能大于1分钟') return } if(checkSizes.videoWidth!='1280'){ console.log('只能视频上分辨率为720') return } if(checkSizes.ccbl.join(':')!='16:9'){ console.log('上传尺寸为16:9的视频') return } console.log(files, '上传成功') } 复制代码3.创建虚拟dom 并且放回对应的值
let checkSize = async (files, isVideo) => { if (!files || !files[0]) return false const checktimevideo = document.getElementById('checktimevideo') if (checktimevideo) { document.body.removeChild(checktimevideo) } let doms if (!isVideo) { doms = document.createElement('video') } else { doms = document.createElement('audio') } const url = URL.createObjectURL(files[0]) console.log(url) doms.src = url doms.id = 'checktimevideo' doms.style.display = 'none' document.body.appendChild(doms) return await gettime(doms); } 复制代码4.由于loadedmetadata 是异步代码所以需要promise进行封装转换为同步代码执行
let gettime = (doms) => { // 由于loadedmetadata 是异步代码所以需要promise进行封装转换为同步代码执行 const promise = new Promise(resolve => { doms.addEventListener('loadedmetadata', e => { const gcd = getGcd(e.target.videoWidth, e.target.videoHeight); console.log(gcd) let obj = { videoWidth: doms.videoWidth, // 尺寸宽 --- 分辨率 videoHeight: doms.videoHeight, // 尺寸高 duration: e.target.duration, // 视频时长 1表示一秒 ccbl:[e.target.videoWidth / gcd, e.target.videoHeight / gcd] // 计算尺寸比例 } resolve(obj) }) }) return promise } 复制代码5.由于计算尺寸比例需要使用到最大公约数进行计算
// 获取最大公约数 function getGcd(a, b) { let n1, n2; if (a > b) { n1 = a; n2 = b; } else { n1 = b; n2 = a; } let remainder = n1 % n2; if (remainder === 0) { return n2; } else { return getGcd(n2, remainder) } }
作者：被遺忘的回憶
链接：https://juejin.cn/post/7020695653189681189