Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Adding Video Element on the Fly and Drawing it to a Canvas Element

, 30 Nov 2011
Rate this:
Please Sign up or sign in to vote.
Adding Video Element on the Fly and Drawing it to a Canvas Element

Introduction

Adding Video Element on the Fly and Drawing it to a Canvas ElementOne of the requirements in a project that I work on lately is to create on the fly video elements and to show them inside a canvas element. This post will show you how you can do it.

Adding Video Element on the Fly

The HTML5 Video element is a DOM element. As any other DOM element, you can create it using the document.createElement function and then to supply its relevant properties. After the creation of the element, you will have to append it into the DOM tree. One place that you might append the element to is at the end of the body element (but you might append it to other elements as well). The following code snippet shows how to create a video element on the fly and append it to the body element:

var video = document.createElement('video');
video.src = 'your source goes here';
video.controls = true;
document.body.appendChild(video);

Drawing the Video to a Canvas Element

After you have created the video element and append it to the DOM tree, the video won’t start up until somebody will play it (or you use the autoplay attribute). If you need to display that video on a canvas, you will have to wire up an event handler to the video’s onplay function and to draw the video on the canvas in the handler. Pay attention that you will have to draw the video’s frames or the canvas will only show the first frame that you draw. This is the way you will need to call the draw in an interval. Here is a simple example of how to do exactly that:

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
 
video.onplay = function() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    draw();
};
 
function draw() {
    if(video.paused || video.ended) return false;
    ctx.drawImage(video, 0, 0);
    setTimeout(draw, 20);
}

The Full Example

Here is the full example:

<!DOCTYPE html>
<html>
<head>
    <title>On the Fly Video inside a Canvas</title>        
</head>
<body>
    <canvas id='canvas'></canvas>
    <script type="text/javascript">                
        var video = document.createElement('video');
        video.src = 'trailer.mp4';
        video.controls = true;
        document.body.appendChild(video);
        
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d');
        
        video.onplay = function() {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
                draw();
        };
 
        function draw() {
            if(video.paused || video.ended) return false;
                ctx.drawImage(video, 0, 0);
                setTimeout(draw, 20);
        }
    </script>
</body>
</html>

Summary

When you need to create on the fly videos in your web pages, you can just create them as a any other DOM element. If you need to show these elements inside a canvas, then you will have to draw the video inside the canvas element while it is playing.


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gil Fink
Technical Lead sparXys
Israel Israel
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140922.1 | Last Updated 30 Nov 2011
Article Copyright 2011 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid