programming games show your cannonball. html5 video. miro. classwork/homework: acquire video,...
TRANSCRIPT
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.