Programming Games Basic HTML5 audio example. Catch-up. Work on basic video. Homework: Complete basic video.

Terminology HTML has elements. Element defined by opening and closing tags. Elements are within elements. The video element has a video tag, 3 source tags/elements, content to give message for non-compliant browsers, closing video tag. The video and the source tags contain attributes.

Remember HTML JavaScript has multiple ways to specify events and event handling. –In HTML tags –Using setInterval and setTimeout –Using addEventListener vid.addEventListener(‘ended’,restart,false); NOTE: I’m assuming vid is set to video element and restart is a function…..

Objects An HTML document is described by the Document Object Model. –Objects (code and data) Attributes (aka properties) that are values Methods that are functions to be invoked using the properties of the objects Google Maps Application Programming Interface IS set of objects—methods and attributes we can access –Use a script element referencing external file

Basic audio example Demonstrate playaudio.html playaudio.html Need to acquire audio. Use Miro Video Converter (or other tools) to produce mp3 and wav versions (assuming you didn't start with wav version). Write HTML5 –note: I added an image. You can add whatever you want.

playaudio.html Esther at the piano Your browser does not accept the audio tag.

Classwork/homework Catch up: bouncing ball, cannonball!!!! Complete your basic video –Do consider making your own very short video. –If you are caught up, make your own audio. Probably record to a wav file? Use Miro Video Converter to produce wav and mp3. Look ahead: read over the tutorial for Google Maps API Version 3.

Teaser Will show example combining Google Maps API and video and audio Consult HTML5 and JavaScript Projects other…

Reminders You, the maker/creator/programmer, need to check all possibilities: –Cannonball hitting target –Cannonball plopping in front of target –Cannonball flying over target Miro Video Converter for video and audio –There are other programs. If you find one and can comment on it, make a posting. –Converting takes longer than running time of clip

Extra credit Find discussion on the different video formats, including patent issues. Read, summarize and put in working link as post on moodle. Get HTML5 video working on Android. May need to download code… –Make posting…

Why… Do you make 3 versions of your video? Why do I ask you to make 3 versions of your video? –To prepare for all browsers. May not be necessary in the future, but it is now. –To make sure you can understand how to do it, using Miro Video Converter AND to manage multiple files

Think… About adding video to one of your applications Adding video using HTML5 video element –NOT putting in a link to YouTube Look also at my examples –The video part generally is not the most complex thing. –Practice scanning code and then looking at parts in detail. Look at function definitions AND function calls & invocations. Look at data.