<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传视频</title>
<style>
#bar-warp {
width: 500px;
height: 30px;
border: 1px solid green;
}
#bar {
width: 0px;
height: 30px;
background: green;
}
</style>
</head>
<body>
<div id="bar-warp">
<div id="bar"></div>
</div>
<span id="precent"></span>
<br />
<input type="file" onchange="changeFile(event)" />
<script>
async function changeFile(e) {
let files = e.target.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)
}
if (checkSizes.duration > 300) {
console.log('视频上传时间不能大于5分钟')
return
}
if (checkSizes.videoWidth != 1280 && checkSizes.videoHeight <= 720) {
console.log('只能视频上分辨率为720')
return
}
if (checkSizes.ccbl.join(':') != '16:9') {
console.log('上传尺寸为16:9的视频')
return
}
var pic = files[0]
var fd = new FormData();
var xhr = new XMLHttpRequest();
// 这里写接口
xhr.open('post', 'aa', true);
xhr.onreadystatechange = function () {
//readystate为4表示请求已完成并就绪
if (this.readyState == 4) {
document.getElementById('precent').innerHTML = this.responseText;
//在进度条下方插入百分比
}
}
xhr.upload.onprogress = function (ev) {
//如果ev.lengthComputable为true就可以开始计算上传进度
//上传进度 = 100* ev.loaded/ev.total
if (ev.lengthComputable) {
var precent = 100 * ev.loaded / ev.total;
console.log(precent);
//更改进度条，及百分比
document.getElementById('bar').style.width = precent + '%';
document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
}
}
fd.append('pic', pic);
xhr.send(fd);
}
// 获取最大公约数
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)
}
}
// 创建虚拟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);
}
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
}
</script>
</body>
</html>« 上一篇
获取上传文件的进度下一篇 »
vue打开页面同时播放多个视频
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。