实时预览视频、获取视频文件信息、视频时长

最新推荐文章于 2024-08-22 03:58:35 发布

NAMAHAGA

最新推荐文章于 2024-08-22 03:58:35 发布

阅读量3.1k

点赞数

分类专栏： JS

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>video file info</title>
	</head>
	<body>
	<script>
	function videoUpload() {
	var file = document.getElementById("fileUpload").files[0];
	var filePreview = document.getElementById("filePreview");
	if (file) {
	var fileSize = 0;
	if (file.size > 1024 * 1024) {
	fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + "MB";
	} else {
	fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
	}
	document.getElementById("fileName").innerHTML = "名称： " + file.name;
	document.getElementById("fileSize").innerHTML = "大小： " + fileSize;
	document.getElementById("fileType").innerHTML = "类型： " + file.type;
	var fileurl = window.URL.createObjectURL(file);
	var createVideo = document.createElement("video");
	createVideo.setAttribute("src", fileurl);
	createVideo.setAttribute("controls", "controls");
	createVideo.setAttribute("width", "640px");
	filePreview.appendChild(createVideo);
	createVideo.onloadedmetadata = function () {
	document.getElementById("videoTime").innerHTML = "时长： " + formatTime(createVideo.duration);
	}
	}
	}

	function formatTime(time) {
	var time = time \|\| 0;
	var h = parseInt(time / 3600),
	m = parseInt(time % 3600 / 60),
	s = parseInt(time % 60);
	h = h < 10 ? "0" + h : h;
	m = m < 10 ? "0" + m : m;
	s = s < 10 ? "0" + s : s;


	}

	</script>

	<form>
	<input type="file" name="fileUpload" id="fileUpload" onchange="videoUpload();" />
	</form>

	<div id="filePreview"></div>

	<p id="fileName"></p>
	<p id="fileSize"></p>
	<p id="fileType"></p>
	<p id="videoTime"></p>


	</body>
	</html>