programming games show your cannonball. html5 video. miro. classwork/homework: acquire video,...

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

<video … attributes >

<source …>

<source …>

<source …>

Your browser does not accept video.

</video>

<video id="vid" controls="controls" preload="auto">

<source src="sfire3.webmvp8.webm" type="video/webm; codec="vp8, vorbis"'> vp8, vorbis"'">

<source src="sfire3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

<source src="sfire3.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>

Your browser does not accept the video tag.

</video>

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.

<video id="vid" controls="controls" preload="auto" autoplay>

<source src="whatdoyouhave.webm" type='video/webm; codec="vp8, vorbis"'> <source src="whatdoyouhave.mp4"> <source src="whatdoyouhave.ogv" type='video/ogg; codecs="theora, vorbis"'> Your browser does not accept the video tag.</video>

Simple examples

http://faculty.purchase.edu/jeanine.meyer/html5/simplevideo.html

http://faculty.purchase.edu/jeanine.meyer/html5/snowmanSong.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.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/quizmultiple.html

Miro converter

• There are other tools for converting videos.

• Demonstrate.

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…

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.