Using the output from a video as a texture

If you read the preceding section on rendering to a canvas, you may have thought about rendering video to canvas and using that as input for a texture. That's one way to do it, but Three.js already has direct support to use the HTML5 video element (through WebGL). Check out 24-video-texture.html. Refer to the following screenshot for a still image of this example:

 

Using video as input for a texture is easily, just like using the canvas element. First we need a video element to play the video:

    <video 
        id="video" 
        style="display: none; position: absolute; left: 15px; top: 75px;"
        src="../../../assets/movies/Big_Buck_Bunny_small.ogv" 
        controls="true" 
        autoplay="true">
    </video>

 

This is just a basic HTML5 video element that we set to  play automatically. Next, we can configure Three.js to use the video as an input for a texture, as follows:

  var video = document.getElementById( 'video' );
  var...