HTML5 Game - Using Video Images

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Image

Introduction

We can use a video element as the source of the image for the drawImage method.

When we do this, we take a snapshot of the video.

The following code shows how to use provides a demonstration.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>Example</title>  
        <style>  
            canvas {border: thin solid black}  
            body > * {float:left;}  
        </style>  
    </head>  
    <body>  
        <video id="vid" src="http://java2s.com/style/demo/your.webm" controls preload="auto"   
            width="360" height="240">  
            Video cannot be displayed  /*w  w  w . jav a2 s.  com*/
        </video>  
        <div>  
            <button id="pressme">Snapshot</button>  
        </div>          
        <canvas id="canvas" width="360" height="240">  
            Your browser doesn't support the <code>canvas</code> element  
        </canvas>  
        <script>  
            let ctx = document.getElementById("canvas").getContext("2d");  
            let imageElement = document.getElementById("vid");  
              
            document.getElementById("pressme").onclick = function(e) {  
                 ctx.drawImage(imageElement, 0, 0, 360, 240);  
            }  
        </script>  
    </body>  
</html>

Related Topic