Last week while Humph was in Spain at an Open Video conference he challenged the class to put together some kind of demo using HTML5 Video. After a bit of thinking and a little research, I decided to use the Google Maps API and jQuery for my little mashup.
Taking inspiration from popcorn.js, which ties locations mentioned in a video to their geographical location using Google Maps, I decided to try something a little different. I noticed that you could specify a zoom level to the Google Maps API so I found a video that showed shots of famous places around the world, in this case, the New7Wonders Foundation's 7 Wonders of the world.
I used Google Maps to get the Longitude and Latitude of each location, and put them into an xml file along with descriptions of when i wanted to display them and at which zoom level to display them. Heres a sample of one location:
<location>
<timeOut>39</timeOut>
<latitude>-22.951917</latitude>
<longitude>-43.2105</longitude>
<zoom>17</zoom>
</location>
Having completed that, I started by making a jQuery AJAX call to load the xml file, which is passed into a parse function I wrote, that traverses the nodes and loads the data into an array of "locations". Then an event listener is added to the video that call the checkTime() function when the time in the video changes. checkTime() compares the currentTime of the video to the timeOut value of the currently displayed location. if it finds that the video location should be updated, the index of the currently displayed location is incremented then updateMap() is called, taking in the latitude, longitude and zoom level of the new location.
updateMap() then creates two variables for the call to the Google Maps service. the first is called "LatLng", and is a object that describes the latitude and longitude. The second is an object called ops, which describes several options for the map being displayed, these are: The zoom level, the LatLng object, and two flags that disable the default maps UI and tells the service to return a Satellite map. The Map() function takes in the element to be used for the map (a div called "map_canvas") and the ops object.
You can see the demo live right here (you need an HTML5 capable browser)
For those of you who haven't joined us in the 21st century, well you're out of luck.....
just kidding, you can see the demo below on YouTube:
(But it won't have the awesome musical score so you still lose)