CODEWITHSUNDEEP
htmlcanvashtml5-video
Harry
Harry

Reputation: 13329

Canvas and Video - HTML5

I see that you cannot stretch a video to fit a window size. It keeps the aspect ration.

I can play a video through canvas, cant you do it with canvas? Where canvas stretches to fit the window?

It seems logical that It would work

Upvotes: 2

Views: 166

Answers (2)

Simon Sarris
Simon Sarris

Reputation: 63812

Yes, very easily with drawImage's optional arguments specifying width and height. For example:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var myVideo = document.createElement('video');
// Video tags usually have more than one source. Not all browsers can play Ogg/Theora
myVideo.src = "http://upload.wikimedia.org/wikipedia/commons/2/2f/Mockingbird_Spring.ogv";
myVideo.autoplay = true;
myVideo.loop = true;


setInterval(function () {
    // video is 1280 x 720 but I am stretching it to 400x20
    ctx.drawImage(myVideo, 0, 0, 400, 20);
    // Also draw it normally
    ctx.drawImage(myVideo, 0, 100, 128, 72);
}, 10)

Live example: http://jsfiddle.net/simonsarris/zwwyd/

Upvotes: 3

Seeking Knowledge
Seeking Knowledge

Reputation: 162

You can use the video.js API instead though, your choice :)

Link to video.js (it's open source of course)

Upvotes: 0

Related Questions