Home Draw video on canvas HTML5
Reply: 0

Draw video on canvas HTML5

user1585 Published in June 20, 2018, 7:39 am

I'm trying to draw a video on a canvas. To achieve this I capture the onMouseDown and onMouseUp events in Javascript to get the x and y coordinates of each event (that I need to set the position, width and height of the video inside the canvas).

Therefore, every time I draw a video on the canvas, the previous I create should be stopped and the new one has to be played. Two problems:

1) the video doesn't play (the function only draws the first frame), but his audio does

2) how can I get previously drawn videos to stop?

Demo: http://jsfiddle.net/e3c3kore/

    <canvas id="canvas" width="800" height="600"></canvas>

var canvas, context, xStart, yStart, xEnd, yEnd;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("mouseup", mouseUp);

function mouseDown(e) {
    xStart = e.offsetX;
    yStart = e.offsetY;

function mouseUp(e) {
    xEnd = e.offsetX;
    yEnd = e.offsetY;
    if (xStart != xEnd && yStart != yEnd) {
    var video = document.createElement("video");
                        video.src = "http://techslides.com/demos/sample-videos/small.mp4";
                        video.addEventListener('loadeddata', function() {
                            context.drawImage(video, xStart, yStart, xEnd-xStart, yEnd-yStart);

Demo: http://jsfiddle.net/e3c3kore/

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.32264 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO