Video credit: 'asdfmovie song by LilBruceWayne'
As you may know, HTML5 standard includes <video> tag support.
This adds some crazy interesting possibilities that can be used in games as well.
A common wish is to have a video playing as part of game or as its background overall.
Here I'm going to explain methods of doing this in Tululoo.
(implementations in languages and frameworks that allow 'low-level' access to javascript would be pretty similar too)
Adding video to page
There are multiple ways of doing this, as adding video as element to document\other component, setting innerHTML of element to video code, and other. For demonstration purposes we'll just append code of video to end of document, keeping it invisible, and obtain a reference to it afterwards:
document.write("<video id='video' style='display: none;'>" +"<source src='asdf.webm' type='video/webm' />" +"<source src='asdf.mp4' type='video/mp4' />" +"</video>"); var video = document.getElementById('video'); video.load();
Note here about <source> - you will need video in multiple formats to have it playing in all browsers. According to Wikipedia, webm+mp4 combination covers all major browsers. Video converters can be found around the internet.
Above code can be pasted into "Global variables" section or creation event of some object (though global variables seem to be a better solution, as you are less likely to add multiple instances of same video to the game this way.
Starting the video.
With above code video will be loaded, however will not start automatically.
To actually start the video, the following line of code is needed:
video.play();
You may also want to set video's .onload property to a function so you can catch the moment when video is done downloading & buffering.
If you will test the game at this point, you will notice that sound from video is played, however no image is seen. This is no magic, since the video itself is hidden and code for drawing is not added yet.
Drawing the video
To have video drawn correctly (and drawn where we want it to), drawImage function should be used.
Here I have used it with argument set drawImage(image, x, y, width, height) to have video stretched to screen size.
tu_context.drawImage(video, 0, 0, room_width, room_height);
(tu_context is reference to 2d context of game's main canvas)
In game seen on screenshot in start of this post, I've drawn video in the bottom-most object, then semi-transparent white rectangle, then game elements.
That's it. Have fun making games with videos :)