Programming Games Show your cannonball. HTML5 video. Miro. Classwork/Homework: Acquire video, convert to multiple formats, and produce simple (just html) 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) OR move the whole video element in the window

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 Your browser does not accept video.

vp8, vorbis"'"> Your browser does not accept the video tag.

But.... Order of videos seems to make a difference on latest Chrome Note webm first webm may be the one format that survives… Note also single and double quotation marks. You can copy and paste and then change the name of the file.

Your browser does not accept the video tag.

Simple examples

Example: quiz with reward dynamic creation of html markup addEventListener: to make matches video when done aculty.purchase.edu/jeanine.meyer/html5/quizmultiple.html

Miro converter There are other tools for converting videos. Demonstrate.

Video tag attributes Include 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…

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.