O'Reilly logo

HTML5 Data and Services Cookbook by Mite Mitreski, Gorgi Kosev

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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/ ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required