Here we have a fairly straightforward web based mini-app showing how geo-coded videos can be visualised on a Google map and linked to a comments system. Deep linking is also catered for so we can distribute a URL and know that a particular video will be shown on the map straightaway when that URL is clicked. How does it all work?

The video publishing system is Brightcove and in this case each eligible video in the video CMS has an element of geo-valuable metadata associated with it such as ‘postcode=WC29PS’. As a further precaution against retrieving redundant data from the video CMS, each eligible video is also added to a given playlist (ie collection of videos). This way we don’t need to get all the videos from our video CMS in order to find the ones with postcodes.

At run time, our web mini-app uses the Brightcove Media API to read the contents of the given playlist and parse the metadata of its members to retrieve (UK in this instance) postcodes for each.

Next comes the geo-complexity – mapping data is based on longitude and latitude values, not on postcodes! So the next step is to use the Google AJAX search API to translate postcodes to mappable coordinate values. This process is not  100% accurate so beware if you want to place markers close together on a zoomed-in map where accuracy is crucial.

The Google Maps API makes it straightforward to take the returned positional data and create a set of markers on a map and determine the contents of each focus balloon when a given marker is selected. In the demo, elements of the metadata for each video are shown outside of the actual player eg video name and description. These are all added to a well-rounded snippet of HTML which forms the balloon contents.

Last but not least, the comment thread for each video is shown by associating the video id with that comment thread.

Did I miss something? Oh yes deep linking – the mini-app URL takes an optional parameter ‘id’, if present and the id value matches a video id on the map – the map automatically moves to that location and the caption balloon opens showing the relevant content.

So here it is – http://digitalsurface.co.uk/videomap/ and here it is with a video already loaded via the deep linking method discussed above – http://digitalsurface.co.uk/videomap/?id=42474432001.

Note that the Intense Debate comments element does not work with all browsers.

Tags: brightcove, comments, custom video player, geocode, Google Maps, Intense Debate, mapping, mashup