Playing Videos with Canvas – HTML5 Canvas


These kinds of effects get more interesting when your source material is a set of moving pictures. The effects that we’re doing on single images can be done in real time while showing a movie. Let’s begin with a simple HTML page containing a video that we want to use with the canvas. We can see that it has a very empty script tag. Our video can be any given size, so hard coating dimensions is not optimal. Luckily for us, the video tag has a loaded metadata event that we can subscribe to and set the width and the height. Like loaded metadata, the play event tells us when the user has started playing the video. If the video isn’t paused or ended, it’s going to execute this draw function, which tells it to draw the image to the canvas. Before we refresh this page, let’s see if you can predict what happens. What will this code do? It shows the video in sync with the source video. Or does it show a single frame of the video?

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *