1. Show your animation project. HTML5 video. Miro.
Programming Games
Show your animation project. HTML5 video. Miro.
Classwork/Homework: Acquire video, convert to multiple formats, and produce simple (just html) HTML5 program. 1

2. HTML5 native support for video and audio
No need for Flash plugin or Quick Times or … 2

3. 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 3

4. 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. 4

5. sketch of video element
<video … attributes >
<source …>
Your browser does not accept video.
</video> 5

6. <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> 6

7. 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.

8. <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> 8

9. Simple examples

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

11. Example: origami directions
Idea was to use standard directions but when needed,
Add images
Add video clips 11

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

13. 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 May not work in Firefox, but does work in other browsers
preload In some browsers, starts loading of video files early… 13

14. Classwork / homework Basic video project
Acquire video.
(Upload to your computer)
Make mp4, webm, and ogg versions.
Can modify file names.
Prepare simple HTML5 script with a (static) video element to play video.
Try out on different browsers.
Next project is: complex video. Do something making use of JavaScript. You can study other video examples for ideas. 14