James' Website

January 22, 2007

How to make a TOC for your Google Video

I recently put up my band's gig, recorded at the Red Rooster, on Google Video. It's great that they will host an hour-long video for me, but for some reason there's very little facility for jumping to different "chapters" in the video - in my case, skipping between songs. Here's how to get it done:

On the Google Video Page: If you write a time in the form "hh:mm:ss" or "mm:ss" into a comment on a Google Video, they will automatically wire it up through some well-hidden javascript so that when you click on the time it jumps to the chapter. For some reason they thought this would be a bad idea in the Description field though. So the solution here is to make a comment that contains your table of contents, then mention in the Description where users can find it. You can see this in action here: http://video.google.com/videoplay?docid=3960801105237907243&hl=en

For an embedded video: this solution requires some sort of server-side processing technology, like ASP or PHP. Whatever crazy javascript they're using to control the flash video player, they've hidden it well. What we can use though is the "FlashVars" attribute of the EMBED tag where we declare the video player. By setting the "InitialTime" variable we can make the video start from any point. So use a querystring variable and write it to the InitialTime property. If the other "FlashVars" property "AutoPlay" is set to true, this will work just like chapters. Here's an example using ASP.NET with C#:

<embed 
	style="width:100%;height:80%;" 
	id="VideoPlayback" 
	type="application/x-shockwave-flash" 
	src="http://video.google.com/googleplayer.swf?docId=3960801105237907243&hl=en" 
	FlashVars="autoPlay=true&initialTime=<%=Request.QueryString["InitialTime"]%>"/>

Note the server-side tag that puts the querystring variable into the initialTime property. Now just make a bunch of hyperlinks alongside your video, pointing to the same page with different InitialTime values in the querystring, and you're all set.

I'll leave it to you to add extra guts to make sure the querystring variable is a valid integer, which is definitely a good idea. Here's an example from my band's site that uses an ASP.NET DropDownList: http://www.quadrafonics.com/video_watch.aspx

For those without access to server-side code, and to prevent postbacks, I'll bet this could also be done using javascript DOM programming - just remove the EMBED node, rebuild it with the new FlashVars attribute, and drop it in. Personally I couldn't be bothered to worry about cross-browser compatibility and all the rest, but if you come up with a pure javascript solution please let me know.

Add a Comment