Capturez la première image d'une vidéo intégrée

Je souhaite capturer la première image d'une vidéo intégrée en tant qu'image sans utiliser de scripts côté serveur. Probablement avec javascript, est-ce possible?

En fait, assez sûr que vous pouvez, en utilisant HTML5. Jetez un oeil à ce lien: HTML5 Video Destruction .

C'est copier le cadre vidéo dans une autre toile toutes les 33 ms. Vous pouvez jouer avec cela et voir si vous pouvez capturer le premier cadre lorsque la vidéo commence à s'exécuter.

Je peux examiner plus loin si vous aimez (cela me fascine)

EDIT: oh mon DIEU, CELUI-CI EST FRAIS. Je viens de trouver une solution. Aller à sambro.is-super-awesome.com/videofirstframe/

Vous devez ouvrir cela dans Google Chrome. Firefox ne prend pas en charge mp4 (je pense).

La première fois que j'ai déjà fait quelque chose avec HTML5, je ne peux pas attendre que ce soit dans la majorité des navigateurs 🙂

EDIT EDIT: D'accord, j'ai téléchargé la version .ogg de cette vidéo et configuré mon serveur Web pour gérer correctement le type de vidéo, Firefox devrait également travailler dans ce petit exemple.

EDIT EDIT EDIT: Nitpickers qui veulent la source ici, bien, voici:

// 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); 

Réponse simple: non.