Beispielcode für die Aufnahme von Standbildern aus Videos mit HTML5

Ein einfaches Beispiel, das zeigt, wie man ein Standbild aus einem Video aufnimmt. Werfen wir einen Blick darauf

Angenommen, Sie haben den folgenden HTML-Code:

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

Wenn der Benutzer dann auf die Schaltfläche „Aufnehmen“ klickt, schreiben wir den aktuellen Videoinhalt auf eine Leinwand und Verwenden Sie diese Option, um das Bild auf der Leinwand anzuzeigen.

(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);           
}());

[Verwandte Empfehlungen]

1. Kostenloses h5-Online-Video-Tutorial

2.HTML5-Vollversionshandbuch

3. php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBeispielcode für die Aufnahme von Standbildern aus Videos mit HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!