HTML5를 사용하여 비디오에서 스틸 이미지를 캡처하는 예제 코드

동영상에서 정지 이미지를 캡처하는 방법을 보여주는 간단한 예입니다. 살펴보겠습니다

다음 HTML 코드가 있다고 가정합니다:

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

그런 다음 사용자가 "캡처" 버튼을 클릭하면 현재 비디오 콘텐츠를 캔버스에 쓰고 디스플레이를 사용합니다. 캔버스에 이미지.

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

[관련 추천]

1. 무료 h5 온라인 동영상 튜토리얼

2.HTML5 정식 버전 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

위 내용은 HTML5를 사용하여 비디오에서 스틸 이미지를 캡처하는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!