programming games
DESCRIPTION
Programming Games. Show your cannonball. HTML5 video and audio. Miro. Bouncing video. Jigsaw video. Homework: Acquire video and produce HTML5 program. HTML5 native support for video and audio. No need for Flash plugin or Quick Times or …. Video. Native support of video - PowerPoint PPT PresentationTRANSCRIPT
Programming Games
Show your cannonball. HTML5 video and audio. Miro. Bouncing video. Jigsaw video.
Homework: Acquire video and produce HTML5 program.
HTML5 native support for video and audio
• No need for Flash plugin or Quick Times or …
Video
• Native support of video
• dynamic control (can make visible and invisible and start and stop and re-position)
• Can grab a frame from a video and place on the canvas (or place some of it on canvas)
Problem/solution
• Different browsers accept different formats:– mp4, webm, ogg
• but there is a way to provide all the alternatives.
• This requires making distinct versions of each video clip.
sketch of video element
<video … attributes >
<source …>
<source …>
<source …>
Your browser does not accept video.
</video>
Simplest example
• http://faculty.purchase.edu/jeanine.meyer/html5/playvideo.html – Note: this example was converted previously
from a MOV shot with vertical orientation
Recall
• Example with CSS using browser libraries to rotate:http://faculty.purchase.edu/jeanine.meyer/html5/playblrrotated.html
Example: quiz with reward
• dynamic creation of html markup
• addEventListener: to make matches
• video when done
– http://faculty.purchase.edu/jeanine.meyer/html5/quizmultiple.html
<video id="vid" controls="controls" preload="auto">
<source src="sfire3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="sfire3.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="sfire3.webmvp8.webm" type="video/webm; codec="vp8, vorbis"'">
Your browser does not accept the video tag.
</video>
Video tag attributesInclude• id This serves function of making the video
element accessible by code• width and height Usual meaning
• controls This produces controls. Different in different browsers.
• loop Does not work in Firefox, but does work in others
• preload In some browsers, starts loading of video files early…
Bouncing video
• Bouncing video element: http://faculty.purchase.edu/jeanine.meyer/html5/videobounceE.html
Audio
• situation similar to video: no one format recognized by all browsers.– mp3 and ogg
rock paper scissors (with audio)
• animation (setInterval), addEventListener for click, calculations to determine which throw, audio object
• http://faculty.purchase.edu/jeanine.meyer/html5/rockpaperscissorssounds.html
• Put audio elements in body<audio autobuffer>
<source src="hithard.ogg" />
<source src="hithard.mp3" />
</audio>
• In init function: musicelements = document.getElementsByTagName("audio");
• In other code, determine which one: musicelements[musicch].play();
Simple video
• http://faculty.purchase.edu/jeanine.meyer/html5/video.html
<!DOCTYPE html><html><head><title>Video </title><meta charset="UTF-8"></head><body><video id="vid" loop="loop" preload="auto"
controls="controls"><source src="joshuahomerun.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'><source src="joshuahomerun.theora.ogv" type='video/ogg;
codecs="theora, vorbis"'><source src="joshuahomerun.webmvp8.webm"
type='video/webm; codec="vp8, vorbis"'>Your browser does not accept the video tag.</video>Joshua's home run.</body></html>
Bouncing ball video
• http://faculty.purchase.edu/jeanine.meyer/html5/videobounce.html
• Note: moving mask.
jigsaw
• http://faculty.purchase.edu/jeanine.meyer/html5/jigsaw/jigsawdance.html
• Works on iPhone and iPad
• Does not work on IE9, Android, ….
Critical requirements for jigsaw• Acquire video clip• Acquire first frame as image • break up into pieces and record positions of pieces
• Program set up of event handling for mouse dragging AND for touch events
• Program moving (dragging) pieces around– does not use the new drag and drop features. Uses mouse
down, mouse move, and mouse up and touch equivalents.
• Program checking if jigsaw is (close enough) complete• Program playing of video
Execution time
• … when the document has been loaded and any JavaScript in the script element is running.
• Development time: when you are creating the program.
• Note: typically, the HTML document, including everything in the body element is created by you during development time and built when the document is loaded.
• It is possible to create html elements entirely by coding.
Jigsaw puzzle pieces• Each piece is HTML markup created dynamically (during
execution time).
s = document.createElement('piece');s.innerHTML = ("<img src='"+pieces[i]+"' id='"+uniqueid+"'/>");
document.body.appendChild(s); thingelem = document.getElementById(uniqueid);
x = piecesx[i] +100;y = piecesy[i] + 100;thingelem.style.top = String(y)+"px";thingelem.style.left = String(x)+"px";
Miro Video Converter
• one of several programs for converting (producing new versions) of video and audio.– There are others and it appears that they
don't produce the exact same thing.
• You need to download Miro.
Origami directions
• http://faculty.purchase.edu/jeanine.meyer/html5/origamifish.html
• Each of the steps is a function. Some functions draw on the canvas; two of the functions play video.
Recall
• Example manipulates video by extracting frames and drawing each on canvas over and over…
• http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html
• Note use of object-oriented programming
Other videos
• Re-positions (and keeps re-positioning) a video element along a path
http://faculty.purchase.edu/jeanine.meyer/html5/movingpictures.html
• Plays sections of a video clip http://faculty.purchase.edu/jeanine.meyer/html5/booktrip1.html
Classwork / homework
• Basic video project– Acquire video.– (Upload to your computer)– Make mp4, webm, and ogg versions.– Prepare simple HTML5 script with a (static)
video element to play video.– Try out on different browsers.
• You can study other video examples for possible use for your own project.