You need to get the first frame from the video and paste it into img on javascripte

Closed due to the fact that off-topic participants Kromster , Enikeyschik , Air , 0xdb , yolosora 28 Dec '18 at 13:15 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • " Learning tasks are allowed as questions only on condition that you tried to solve them yourself before asking a question . Please edit the question and indicate what caused you difficulties in solving the problem. For example, give the code you wrote, trying to solve the problem "- Enikeyschik, yolosora
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Launch the video and FAST click the PrintScreen button. Then in Paint cut the picture for you and the first frame. :-) But seriously, there are a lot of video editors, including free and online, which allow you to cut any frame. - pepsicoca1
  • Thank you, but all this needs to be done on javascripte) - Sergey Usachev
  • And, do you write a pirate video site? Then you need to search for lib in javascript to work with video. :-) - pepsicoca1
  • stackoverflow.com/questions/32699721/… - nörbörnën

1 answer 1

Taken from https://stackoverflow.com/questions/3749011/capture-first-frame-of-an-embedded-video

// Create a video element. var vid = document.createElement("video"); // We don't want it to start playing yet. vid.autoplay = false; vid.loop = false; // No need for user to see the video itself. vid.style.display = "none"; // This will fire when there's some data loaded for the video, should be at least 1 frame here. vid.addEventListener("loadeddata", function() { // Let's wait another 100ms just in case? setTimeout(function() { // Create a canvas element, this is what user sees. var canvas = document.createElement("canvas"); // Set it to same dimensions as video. canvas.width = vid.videoWidth; canvas.height = vid.videoHeight; // Put it on page. document.getElementById("done").innerHTML = ""; document.getElementById("done").appendChild(canvas); // Get the drawing context for canvas. var ctx = canvas.getContext("2d"); // Draw the current frame of video onto canvas. ctx.drawImage(vid, 0, 0); // Done! }); }, false); // Have to include .ogv for firefox. I don't think this is working atm because my webserver isn't serving up // videos properly. if(BrowserDetect.browser == "Firefox") { var source = document.createElement("source"); source.src = "BigBuckBunny_640x360.ogv"; source.type = "video/ogg"; vid.appendChild(source); } else { var source = document.createElement("source"); source.src = "BigBuckBunny_640x360.mp4"; source.type = "video/mp4"; vid.appendChild(source); } // Add video to document to start loading process now. document.body.appendChild(vid);
  • Thanks, it turned out - Sergey Usachev
  • You are welcome. If this is a solution to your question, then mark it as correct so that other participants can use it. - Alexandr Tovmach