DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

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

Gil Fink user avatar by
Gil Fink
·
Nov. 01, 11 · Interview
Like (0)
Save
Tweet
Share
9.18K Views

Join the DZone community and get the full member experience.

Join For Free

one 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 and drawing it to a canvas element

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

Element

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Unlock the Power of Terragrunt’s Hierarchy
  • Automated Testing With Jasmine Framework and Selenium
  • Low-Code Development: The Future of Software Development
  • 5 Steps for Getting Started in Deep Learning

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: