0

I have a video that I would like to draw inside canvas. I am not really sure how to go about doing this. Can anyone demonstrate how to do this through JavaScript? Here is the code I have already:

function load(){
  //Code to do this will go in here
}
  <video id="video" height="800" style="width: 100%;" onloadstart="load()">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  <source src="video.webm" type="video/webm" />
  <img src="images/video.jpg" height="800" style="width: 100%;" />
  </video>
<canvas>???</canvas>

I have been to a few sites like this one:http://html5doctor.com/video-canvas-magic/ that show how to do this but I was not able to get it to work. I also do not really need the extra features it provides I would just like a simple video inside canvas. Also, if I implement this on a page, do I have to hide the video element so that there isn't two videos on a page? Thank you.

Bastian
  • 51
  • 10
  • 1
    Take a look at [this question](http://stackoverflow.com/questions/4429440/html5-display-video-inside-canvas). – Regent May 18 '15 at 17:09
  • 1
    IMHO, the accepted answer to the duplicate question is a bit stale. Do I understand that you want the canvas to auto-play the video element's content with the video element being hidden? Do you want the canvas resized to the size of the video? **continued on next comment due to text limits...** – markE May 18 '15 at 18:15
  • 1
    **continued:** If yes, listen for the video element's `loadedmetadata` event and then (1) resize the canvas using the video element's `videoWidth` and `videoHeight` properties, (2) call `yourVideoElement.play()` to start the video playing, and (3) optionally hide the video element (the video element will still play if hidden and canvas will still play the frames from the video). BTW, the current best practice for your timing loop is `requestAnimationFrame` rather than setTimeout. – markE May 18 '15 at 18:15
  • 1
    @markE if the answer in the duplicate post is "stale" you can always [edit the answer](http://meta.stackexchange.com/a/120583) to improve it, or provide an answer in the same post. –  May 18 '15 at 18:52
  • 1
    @K3N: Agreed, further action seems required (add answer to duplicate question, add comment updating / improving duplicate answer, prompt questioner to edit this question, reopen this question)...In this case I suspect (but don't know) that the OP wants something a bit different from the cited duplicate. Given limited time, I'm waiting for the OP to respond to my comments to see where to put my efforts. :-) – markE May 18 '15 at 19:00
  • 2
    Sorry for the delay guys, After looking at the link above:html5: 'display video inside canvas', I found what I needed and I tested it on a blank test page which seemed to work. However, when I do try to implement it on my "dummy site", it seems I get an error: "JavaScript runtime error: Unable to get property 'getContext' of undefined or null reference:. I feel because this worked flawlessly on my test page and not on my site, it seems to not be seeing it for some reason (perhaps it loads before the HTML?). But my initial problem seems to be solved. Thank you everyone for helping me out. – Bastian May 18 '15 at 20:50
  • @Bastian could be that the script tries to obtain a reference to the canvas before the DOM has fully loaded. Try to place the script at the end of the body, or insert as first line: `window.onload =function() { ...rest of script... }` if the script is in the head –  May 18 '15 at 21:43
  • Here's example code. You will have to copy it and add your own mp4 to see it working: https://jsfiddle.net/bLdqvr3s/ – markE May 18 '15 at 23:34
  • @K3N That's what I figured at first, but I have tried several things including the window.onload =function(). I am using other components (DevExpress) which I suspect is part of the reason for the error. I am waiting for a response from them in the meantime. – Bastian May 19 '15 at 20:45
  • Update: I was able to solve this by using an OnInit function through JavaScript and tied it with the component that was holding my canvas. Thank you everyone for your contribution. – Bastian May 20 '15 at 16:47

0 Answers0