Forums » Help » How to play an .mp4 movie in impact?

Does anyone have a code snippet of how they successfully play a video in ImpactJS?

I am looking for a way to integrate the video into a class to be displayed similar to how images are done. I know how to play a video in HTML5 with the <video> tag, but I'm not sure how to integrate it into an ImpactJS class.

Should I wrap it with a class and then play the video with HTML5 like this:

<video id="video1" width="320" height="240" controls>
<source src=http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4 type=video/mp4>
</video>

<script>
var myVideo=document.getElementById("video1");
myVideo.play();
</script>

----------------

I would like to place these videos anywhere on the screen but I'm not sure how. I assume I need to get these videos onto the canvas (maybe they already are on the canvas).

Maybe there is an ImpactJS plugin that will help play movies but I cannot seem to find one.

I searched the forum but I cannot find much about accomplishing this except for links to playing a movie in HTML5 using the <video> tag which I already see how to do.

Should I grab the movie from the canvas and make an image out of it for each frame? This sounds overly complicated so I'm thinking that is not the right approach.

I appreciate any help you can give.

Thanks!

Update:

I got something working by making a Movie class and calling DrawImage() inside the draw function using the video element as the first parameter. I have a few questions about it though.

1. My movie is loaded with HTML5 <video> tag as in my previous post. But I had to put this in my index.html file. I would like to somehow load this within my movie class to keep it encapsulated better. How can I mix HTML5 with the javascript within my class?

2. Looking at the Image class, there is a lot of code that does loading and scaling...I can either copy this functionality for my movie class so it scales properly on different devices or maybe my Movie class should inherit from the Image class and I should copy the canvas into the image each frame? I want my movies to be able to just work on any device like images do. Or, maybe they will "just work" on any device and I dont need any of the scaling code that Image contains?