<!DOCTYPE html>
<html>
<head>
<title>Upload Video Information</title>
</head>
<body>
<input type="file" id="fileInput">
<p>Video Width: <span id="widthDisplay"></span></p>
<p>Video Height: <span id="heightDisplay"></span></p>
<p>Video Duration: <span id="durationDisplay"></span></p>
<p>Video Size: <span id="sizeDisplay"></span></p>
<img id="thumbnail" crossorigin="anonymous">
<script>
const fileInput = document.getElementById("fileInput");
const widthDisplay = document.getElementById("widthDisplay");
const heightDisplay = document.getElementById("heightDisplay");
const durationDisplay = document.getElementById("durationDisplay");
const sizeDisplay = document.getElementById("sizeDisplay");
const thumbnail = document.getElementById("thumbnail");
let thumbnailBlobURL = null;
fileInput.addEventListener("change", function(event) {
const selectedFile = event.target.files[0];
if (selectedFile) {
const videoElement = document.createElement("video");
videoElement.preload = "metadata";
videoElement.src = URL.createObjectURL(selectedFile);
videoElement.controls="controls"
videoElement.autoplay=true
videoElement.muted=true
videoElement.addEventListener("loadedmetadata", async function() {
const videoWidth = this.videoWidth;
const videoHeight = this.videoHeight;
const videoDuration = this.duration;
const fileSize = selectedFile.size;
const fileSizeDisplay = formatFileSize(fileSize);
widthDisplay.textContent = videoWidth + " pixels";
heightDisplay.textContent = videoHeight + " pixels";
durationDisplay.textContent = videoDuration.toFixed(2) + " seconds";
sizeDisplay.textContent = fileSizeDisplay;
document.body.appendChild(videoElement)
// 获取视频的第一帧画面
videoElement.currentTime = 0;
videoDemo = document.getElementById('videoDemo')
console.info(videoDemo)
thumbnailBlobURL = await generateThumbnail(videoElement);
thumbnail.src = thumbnailBlobURL;
// 释放 URL.createObjectURL 创建的 URL
URL.revokeObjectURL(videoElement.src);
});
}
});
function formatFileSize(bytes) {
if (bytes === 0) return "0 Bytes";
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i];
}
async function generateThumbnail(videoElement) {
return new Promise((resolve) => {
debugger
const canvas = document.createElement("canvas");
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
resolve(url);
}, "image/jpeg");
});
}
</script>
</body>
</html>
js获取视频的大小,宽高,时间,获取视频的第一针
最新推荐文章于 2024-08-05 16:06:42 发布