Two of My Javascript Teaching Examples Let the User Draw a Path and Then an Image Or A

Two of my JavaScript teaching examples let the user draw a path and then an image or a video clip moves along the path at a speed proportional to that taken in the drawing. The critical features are the HTML5 canvas and native support for video. The path definition is created by storing positions (x, y pairs) acquired using an event handler for the mousemove event on a canvas element and then using the event handler for setInterval to re-position an element, either the image or the video element, on top of the canvas. You can read an article (originally published in jsmag) on how this is done at http://faculty.purchase.edu/jeanine.meyer/movingpicturesApr2013.pdf.

Defining the path on mobile devices using touch is relatively easy using the facility to simulate mouse events and is described in the article.

The image application worked on Android and iOS devices and the video program was fine on my Android phone. However, making the video work on an iPAD proved to be a challenge. This note describes what I did to produce something that worked.

The first challenge was getting the video to play on the iPAD. Following the standard practice, I used the Miro Video Converter to produce mp4, ogg and webM versions of the video. Here is the window for Miro:

However, as it turned out, there are distinct mp4 encodings. The option that works is under Apple, and not Format/Video.

The next challenge was that iOS devices require the user to start a video. This is/was considered a feature and not a bug because it means the user can prevent data charges and long downloads. However, the latest update of iOS for the iPAD appears to remove this requirement. This program now works on my iPad:

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

My original path program made the video invisible until after the path was constructed. This did not seem to be a major requirement, so I made the video visible. However, there was a timing issue for the older iPads. The user needed to start the video and make sure it is started before drawing the path. My approach was to fix this with instructions to the user to wait until the video started. Suggestions welcome.

The modified program is at http://faculty.purchase.edu/jeanine.meyer/html5/mpt.html

AGAIN, this adjustment does not seem to be necessary for the latest update for the iPad.

This and other examples, most with accompanying articles and notes, also can be reached from http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html