Embedding multimedia

Media element can cooperate and be combined with other elements. Various CSS properties can be applied to the elements and there are options to combine video with SVG. We can embed video in canvas element and apply processing on the rendered images.

In this recipe we will create a simple case where we embed a video inside canvas.

Getting ready

In this recipe we will need a video for our video element and an additional requirement is that the video has Cross-Origin Resource Sharing support or is located on our local server. The simplest way to make sure of this is to have a video with our locally running server.

Note

There are many videos with different formats available from NASA and ESA at http://www.spacetelescope.org/videos/astro_bw/.

How to do it...

We will render a video on a canvas element by performing following steps:

1. First start with the HTML file where we add a video element and a canvas:

         <video id="myVideo" width="640" height="360" poster="poster.png" controls...