ClickToFlash Video Site Support

One of ClickToFlash's primary goals is to eliminate as much Flash from the web as possible, allowing users to choose only the Flash they want to see. As such, ClickToFlash has support for viewing videos from YouTube using the QuickTime Player instead. We've heard a lot of feedback indicating that users love this feature, and that they'd love it even more if we expanded it to other video sites.

The ClickToFlash developers are currently considering how best to accomplish this task. (If you're interested in technical details, you can see a proposal for an extensible architecture for supporting alternative sites here.)

What do we need from you? We need help figuring out which video sites we are actually able to support in ClickToFlash.

Playing YouTube videos in QuickTime is not as simple as loading the Flash file using the QuickTime player. ClickToFlash has to construct a URL to an .mp4 file for that video (or any file that QuickTime is able to play natively). So we need you to help figure out a standard method for figuring out URLs to files that QuickTime can play, instead of the .swf files that video sites normally use to load their own player interface and the video file. We've already succeeded in doing this for YouTube, but each video site is different.

(Please note: we highly prefer .mp4 files, but if you have a method for constructing URLs to .flv files, let us know anyway. Supporting .flv files will require Perian, but we haven't decided on whether or not that's a good idea.)

If you do figure out a method, please file a ticket at ClickToFlash's Lighthouse site. Name the ticket "ClickToFlash Site Support: NameOfVideoSite" and then describe the steps needed to construct a URL to a QuickTime-playable file.

Three examples for known sites are below, YouTube, Vimeo, and Break.com. Please use these as guidelines for how to write a ticket when you figure out a method for other video sites.

Thanks for your help!

YouTube

  1. Go to the webpage for any YouTube video (e.g.: http://www.youtube.com/watch?v=ikFVwOuI650 )
  2. Look at the source HTML for the webpage.
  3. Search for "var swfArgs" in the source HTML.
  4. The first occurrence of "video_id" after "var swfArgs" should be followed by a string of characters enclosed in quotation marks that matches the last part of the webpage URL (e.g.: ikFVwOuI650 )
  5. A variable named "t" should also appear soon after "var swfArgs", which is followed by a much longer string of characters enclosed in quotation marks (e.g.: vjVQa1PpcFPf2Mhlr4GK85oHM9DlhMLaHBvQH1fh1zk%3D )
  6. The final URL to the video file is "http://www.youtube.com/get_video?fmt=22&video_id=video_id_chars&t=t_chars", where "video_id_chars" is replaced with the string of characters from step 4, and "t_chars" is replaced with the string of characters from step 5 (e.g.: http://www.youtube.com/get_video?fmt=22&video_id= ikFVwOuI650&t= vjVQa1PpcFPf2Mhlr4GK85oHM9DlhMLaHBvQH1fh1zk%3D ).

Vimeo

  1. Go to the webpage for any Vimeo video (e.g.: http://www.vimeo.com/6523546 )
  2. The string of numbers in the URL of the webpage is the clip ID.
  3. Go to the following URL: http://vimeo.com/moogaloop/load/clip:clip_id , replacing "clip_id" with the clip ID from step 2. This is an XML file.
  4. In the XML file from step 3, extract the string of characters that is preceded by "<request_signature>" and is followed by "</request_signature>" (e.g.: ddcbe28494865ca6f7392915e15d7152 )
  5. In the XML file from step 3, extract the string of characters that is preceded by "<request_signature_expires>" and is followed by "</request_signature_expires>" (e.g.: 1254601800 )
  6. The final URL to the video file is "http://vimeo.com/moogaloop/play/clip:clip_id/request_signature/request_signature_expires/?q=hd", where clip_id is replaced with the clip ID from step 2, request_signature is replaced with the string of characters from step 4, and request_signature_expires is replaced with the string of characters from step 5 (e.g.: http://vimeo.com/moogaloop/play/clip: 6523546/ddcbe28494865ca6f7392915e15d7152/1254601800/?q=hd ).

Break.com

  1. Go to the webpage for any Break.com video (e.g.: http://www.break.com/index/how-not-to-start-a-fire.html )
  2. Look at the source HTML for the webpage.
  3. Search for "sGlobalFileName=" in the source. The characters following that string, enclosed by single quotes, are the video file name (e.g.: how-not-to-start-a-fire_1 ).
  4. Search for "sGlobalContentFilePath=" in the source. The characters following that string, enclosed by single quotes, are the global file path (e.g.: 2009/10 )
  5. The final URL to the video file is "http://video1.break.com/dnet/media/sGlobalContentFilePath/sGlobalFileName.flv", where sGlobalContentFilePath is replaced with the global file path from step 4, and sGlobalFileName is replaced with the file name from step 3 (e.g.: http://video1.break.com/dnet/media/2009/10/how-not-to-start-a-fire_1.flv )