Exemple de code pour capturer des images fixes à partir d'une vidéo à l'aide de HTML5

Un exemple simple montrant comment capturer une image fixe à partir d'une vidéo. Jetons un coup d'oeil

Supposons que vous ayez le code HTML suivant :

<video id="video" controls="controls">
    <source src=".mp4" />
</video>
 
<button id="capture">Capture</button>
 
<p id="output"></p>

Ensuite, lorsque l'utilisateur clique sur le bouton "Capturer", nous écrivons le contenu vidéo actuel sur un canevas, et utiliser pour afficher l’image sur la toile.

(function() {
    "using 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);           
}());

[Recommandations associées]

1. Tutoriel vidéo en ligne h5 gratuit

2.Manuel de la version complète HTML5

3.Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!