Maison > Article > interface Web > Comment implémenter des captures d'écran vidéo dans les compétences js HTML5_javascript
L'exemple de cet article décrit comment implémenter des captures d'écran vidéo à l'aide de js HTML5. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
1. Partie HTML :
<video id="video" controls="controls"> <source src=".mp4" /> </video> <button id="capture">Capture</button> <div id="output"></div>
2. Le code suivant est déclenché lorsque le bouton est cliqué :
(function() { "use strict"; var video, $output; var scale = 0.25; var initialize = function() { $output = $("#output"); video = $("#video").get(0); $("#capture").click(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(); $output.prepend(img); }; $(initialize); }());
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.