1 / 26

Programming Games

Programming Games. Show your cannonball. HTML5 video and audio. Miro. Bouncing video. Jigsaw video. Homework: Acquire video and produce HTML5 program. HTML5 native support for video and audio. No need for Flash plugin or Quick Times or …. Video. Native support of video

aren
Download Presentation

Programming Games

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Programming Games Show your cannonball. HTML5 video and audio. Miro. Bouncing video. Jigsaw video. Homework: Acquire video and produce HTML5 program.

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

  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)

  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.

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

  6. Simplest example • http://faculty.purchase.edu/jeanine.meyer/html5/playvideo.html • Note: this example was converted previously from a MOV shot with vertical orientation

  7. Recall • Example with CSS using browser libraries to rotate:http://faculty.purchase.edu/jeanine.meyer/html5/playblrrotated.html

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

  9. <video id="vid" controls="controls" preload="auto"> <source src="sfire3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="sfire3.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="sfire3.webmvp8.webm" type="video/webm; codec="vp8, vorbis"'"> Your browser does not accept the video tag. </video>

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

  11. Bouncing video • Bouncing video element: http://faculty.purchase.edu/jeanine.meyer/html5/videobounceE.html

  12. Audio • situation similar to video: no one format recognized by all browsers. • mp3 and ogg

  13. rock paper scissors (with audio) • animation (setInterval), addEventListener for click, calculations to determine which throw, audio object • http://faculty.purchase.edu/jeanine.meyer/html5/rockpaperscissorssounds.html

  14. Put audio elements in body <audio autobuffer> <source src="hithard.ogg" /> <source src="hithard.mp3" /> </audio> • In init function: musicelements = document.getElementsByTagName("audio"); • In other code, determine which one: musicelements[musicch].play();

  15. Simple video • http://faculty.purchase.edu/jeanine.meyer/html5/video.html

  16. <!DOCTYPE html> <html><head><title>Video </title> <meta charset="UTF-8"></head> <body> <video id="vid" loop="loop" preload="auto" controls="controls"> <source src="joshuahomerun.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="joshuahomerun.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="joshuahomerun.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'> Your browser does not accept the video tag.</video> Joshua's home run. </body></html>

  17. Bouncing ball video • http://faculty.purchase.edu/jeanine.meyer/html5/videobounce.html • Note: moving mask.

  18. jigsaw • http://faculty.purchase.edu/jeanine.meyer/html5/jigsaw/jigsawdance.html • Works on iPhone and iPad • Does not work on IE9, Android, ….

  19. Critical requirements for jigsaw • Acquire video clip • Acquire first frame as image • break up into pieces and record positions of pieces • Program set up of event handling for mouse dragging AND for touch events • Program moving (dragging) pieces around • does not use the new drag and drop features. Uses mouse down, mouse move, and mouse up and touch equivalents. • Program checking if jigsaw is (close enough) complete • Program playing of video

  20. Execution time • … when the document has been loaded and any JavaScript in the script element is running. • Development time: when you are creating the program. • Note: typically, the HTML document, including everything in the body element is created by you during development time and built when the document is loaded. • It is possible to create html elements entirely by coding.

  21. Jigsaw puzzle pieces • Each piece is HTML markup created dynamically (during execution time). s = document.createElement('piece'); s.innerHTML = ("<img src='"+pieces[i]+"' id='"+uniqueid+"'/>"); document.body.appendChild(s); thingelem = document.getElementById(uniqueid); x = piecesx[i] +100; y = piecesy[i] + 100; thingelem.style.top = String(y)+"px"; thingelem.style.left = String(x)+"px";

  22. Miro Video Converter • one of several programs for converting (producing new versions) of video and audio. • There are others and it appears that they don't produce the exact same thing. • You need to download Miro.

  23. Origami directions • http://faculty.purchase.edu/jeanine.meyer/html5/origamifish.html • Each of the steps is a function. Some functions draw on the canvas; two of the functions play video.

  24. Recall • Example manipulates video by extracting frames and drawing each on canvas over and over… • http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html • Note use of object-oriented programming

  25. Other videos • Re-positions (and keeps re-positioning) a video element along a path http://faculty.purchase.edu/jeanine.meyer/html5/movingpictures.html • Plays sections of a video cliphttp://faculty.purchase.edu/jeanine.meyer/html5/booktrip1.html

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

More Related