kineticjs how to play video

Question

I need to add video to the stage and then play on mouse click using kineticjs.

I searched a lot for this but have not found any working code

Thanks

Answer 1

why does video have to be inside the stage? Couldn't you just place an HTML5 video element on top of the stage?

Answer 2

Add an HTML5 <video> tag to your DOM with the appropriate <source> tags. Assign the video element to a variable. Create a Kinetic.Image for your video to play on. Then play the video by clicking on some object (maybe the image, maybe a "play" button you placed on the stage) and use the following function to draw the video to the image. For best results, hide the video by placing it absolutely offscreen. The image can be any size, but to prevent distortion, the image should be the same aspect ratio as the video.

$('body').append('<div id="video' + vid + '" class="offscreen"></div>');
var vidobj = '<video width="' + vw + '" height="' + vh + ' preload="auto"><source src="' + vsrc + '" type="video/mp4"></source></video>';
$('#video' + vid).html(vidobj);
var video = $('#video' + vid + ' > video').get(0);
var img = new Kinetic.Image({name : 'video', x : vx, y : vy, width : vw, height : vh, image : video});
layer.add(img);
video.play();
setVideo(video,img);

function setVideo(v,i) {
    if (!v.paused && !v.ended) {
        i.setImage(v);
        cvsObj.modal.draw();
        setTimeout(setVideo,20,v,i);
    }
}

v = your video, i = the image object.

EDITED to show creation of HTML5 video tag and Kinetic.Image(). Variables : vid = video id (unique), vw = video width, vh = video height, vx = video x coordinate (for canvas), vy = video y coordinate, vsrc = video source (path to file).