search

Home  >  Q&A  >  body text

javascript - Is there any way to get the pictures in the video

After uploading the video, I can get any frame in it as the cover. Is there any way to do it?

伊谢尔伦伊谢尔伦2725 days ago634

reply all(2)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-06-14 10:56:30

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>capture screen</title>
    </head>
    <body>
    <video id="video" controls="controls">
    <source src="123.MP4">
    </video>
    <p id="output"></p>
    <script type="text/javascript">
    (function(){
    var video, output;
    var scale = 0.8;
    var initialize = function() {
    output = document.getElementById("output");
    video = document.getElementById("video");
    video.addEventListener('loadeddata',captureImage);
    };
     
    var captureImage = function() {
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
     
                var img = document.createElement("img");
                img.src = canvas.toDataURL("image/png");
                output.appendChild(img);
    };
     
    initialize();
    })();
    </script>
    </body>
    </html>

    Found it here too. You try it

    reply
    0
  • 迷茫

    迷茫2017-06-14 10:56:30

    canvas.getContext('2d').drawImage(video,
    0, 0, canvas.width, canvas.height), use the above method to refer to https://developer.mozilla.org.. .

    reply
    0
  • Cancelreply