Postion Stage/layer over html video

0
votes

I have a HTML5 Video and a Kinetic stage/layer(canvas). I want to have the stage/layer directly over the video, because I intend to create shapes. The stage always defaults to the 0,0 position of browser. How do I set the position of the stage/layer is directly over the Video at a certain x,y position. I tried using stage.setAbsolutePosition(56,75) but it does not work.

Thanks in Advanced.

1
canvaskineticjslayerstage

1 Answers

0
votes

Position your KinectJS Stage container and Video container with some CSS:

Very rough example of imaginary HTML and CSS:

<div class="viewport">
   <div id="videoContainer">...</div>
   <div id="kineticContainer">...</div>
 </div>

.viewport {
  position: relative;
}

#kineticContainer {
   ...
   background-color: transparent;
   position: absolute;
   x: 56px;
   y: 75px;
   z-index: 2;//or whatever this needs to be
   ...
}