js截取視頻幀(封面)

本文轉載自查看原文 2020-11-05 17:06 1402 JS

多了不說，少了不嘮

截取效果取消：

代碼：video/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>視頻幀截取</title>
</head>
<body>
<!--
    <input type="file" id="upload-ipt" @change="chooseVideo" accept="video/*" />
    <div id="box" style="display:none"></div>
-->
    <input type="file" id="upload-ipt" onchange="chooseVideo()" accept="video/*" />
    <p id="handle-wrap"></p>
    <div>
        <h3>原視頻</h3>
        <div id="in-box" style="display:none"></div>
    </div>
    <div>
        <h3>視頻截圖</h3>
        <div id="img-wrap"></div>
    </div>
    <script>
        function chooseVideo(){
            var oHandle = document.getElementById('handle-wrap');
            oHandle.innerHTML = "<button onclick='showVideo()'>顯示視頻</button>";

            console.log('選擇文件');
            var obj_file = document.getElementById("upload-ipt");
            var file = obj_file.files[0];
            var blob = new Blob([file]), // 文件轉化成二進制文件
                url = URL.createObjectURL(blob); //轉化成url
            console.log(blob, url);
            var oVideo = document.createElement('video');
            oVideo.setAttribute('src', url);
            oVideo.setAttribute('controls', 'controls');
            oVideo.currentTime = 1;  // 設置當前視頻為 第1s

            var oInBox = document.getElementById('in-box');
            oInBox.appendChild(oVideo);
            console.dir(oVideo);
/*
            oVideo.addEventListener('canplay', function (event){
                var oCanvas = document.createElement('canvas');
                setTimeout( ()=>{
                    oCanvas.width = oVideo.videoWidth;
                    oCanvas.height = oVideo.videoHeight;
                    oCanvas.getContext("2d").drawImage(oVideo, 0, 0, oCanvas.width, oCanvas.height * 2);
                    console.log(oCanvas.toDataURL("image/png")); //第一幀圖片url
                }, 1000 )
            });
*/
            oVideo.addEventListener('canplay', function (event){
                var oCanvas = document.createElement('canvas');
                oCanvas.width = oVideo.videoWidth;
                oCanvas.height = oVideo.videoHeight;
                oCanvas.getContext("2d").drawImage(oVideo, 0, 0, oCanvas.width, oCanvas.height);
                console.log(oCanvas.toDataURL("image/png")); //第一幀圖片url
                var base64 = oCanvas.toDataURL("image/png");
                var oImg = document.createElement("img");
                var oImgWrap = document.getElementById('img-wrap');
                oImg.setAttribute('src', base64);
                oImgWrap.appendChild(oImg);

            });
        }

        function showVideo(){
            // var oVideo = document.createElement('video');
            // oVideo.setAttribute('controls', 'controls');
            var oInBox = document.getElementById('in-box');
            oInBox.style.display = 'block';
        }

    </script>
</body>
</html>

View Code

github地址：

https://github.com/Kayakyx/video-frame-capture

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js截取視頻圖片/獲取視頻封面截取上傳視頻的第一幀作為封面的方法使用ffmpeg進行視頻封面截取使用ffmpeg截取視頻封面並批量上傳獲取視頻第一幀作為視頻封面圖 FFmpeg 入門(1)：截取視頻幀 python-----opencv截取按幀截取視頻 oss獲取視頻文件第一幀做封面截取視頻第一幀作為預覽圖片 javascript截取視頻第一幀