js获取视频的大小，宽高，时间，获取视频的第一针

最新推荐文章于 2023-09-15 17:18:55 发布

cuiyuchen111

最新推荐文章于 2023-09-15 17:18:55 发布

阅读量1.1k

点赞数

文章标签： javascript 音视频前端

本文链接：https://blog.csdn.net/cuiyuchen111/article/details/132458770

版权

<!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>