Adding Video to Your Game

Game Development
1

Here’s how to add a video to a scene in your game:

  1. Add the following code to your mygame.js file (or make your own .js file and reference it in index.html): function showVideoAtTop(thevideo) { var videotag = '<video width="320" height="240" autoplay loop> <source src="'+thevideo+'"> Your browser does not support the video tag. </video>'; var mainText = document.getElementById("text"); mainText.innerHTML = videotag + mainText.innerHTML; }

  2. Then, in your game (e.g. startup.txt or any other scene file) put the following on the page where you want the video to show up:

*script showVideoAtTop("video.mp4")

Replace “video.mp4” with the video you want to use. If it’s in the same folder as your index.html and mygame.js files, you don’t need path information.

Example if the video is in a sub-folder called videos:*script showVideoAtTop("videos/video.mp4")

Example if the video is on the web:*script showVideoAtTop("http://somesite.com/path/to/video/video.mp4")

Notes:

  • I believe Choice of Games won’t publish games that use custom code like this, so this should just be for non-professional or self-published games.

  • No matter where you put this code on your page, the video will appear at the top. However, it’d be trivial to make another function that puts the video at the bottom (i.e. right above the choices section of the page).

  • If you call the script multiple times on the same page (probably with different videos but not necessarily), each subsequent call will put the new video before the previous.

  • Not all browsers support all video types. I think mp4 is pretty good. Webm too, as it’s designed for the web.

  • For cross-browser compatibility, you can add other source tags inside the video block. You could even fallback to an animated gif, but you’d have to make and upload all these alternate video files separately.

  • The source tags probably should have mimetypes. Code could be added to extract that info from the file’s extension or provide it as a parameter to the function, but initial testing seems to show that it works fine without explicitly declaring the mimetype.

  • This code is just a quick hack, and to do it right, many modifications should be added. Due to my ongoing health reasons, I haven’t been writing lately (either code or stories), but yesterday, I thought of CoG again and wondered if videos could be put in games. I experimented to see if I could do it, saw that it could be done, and thought others could benefit.

  • A few possible modifications, aside from all the above, could be to make the function accept multiple videos, adjust their size and alignment, have text among the videos, ability to select if the video loops, auto-starts, and/or has controls, etc.

9 Likes