Videos in the Flickr API | code.flickr.com

It isn’t just you, the pictures really did start moving, some of them at least. Which is an attempt at humor to cover the fact that this post is very belated.

Presumably you’ve noticed that folks are uploading videos to Flickr, and you’re wondering how to work with video in the API? I’ll try to recap, and expand upon the info in this thread in the API group.

Long Photos

First thing to understand is as far as Flickr is concerned videos are just a funny type of photo. Your API application can ignore that video exists and everything should go on working. This means:

you can display a preview of a video by treating it exactly like any other photo on Flickr.
photos AND videos are returned by any method which used to return just photos
you can get info about a video like you would a photo.

Videos, photos, and “media”

If you’re calling one of the dozens of API methods including flickr.photos.search() and … that return what we call a “standard photo response” then that API method takes an “extras” argument. extras is a comma separated list of additional metadata you would like included in the API response.

With the launch of video we’ve added a new extra: “media”. Included media in your list of requested extras and we’ll include a new attribute media=photo or media=video with each photo element. Like so:

<photo id="2345938910" owner="35468159852@N01" secret="846d9c1be9" server="1423" farm="2" title="Naughty Dandelion" ispublic="1" isfriend="0" isfamily="0" media="video"/>

Additionally if you’re calling flickr.photos.search() you can filter your results by media type by passing `media=photos` or `media=videos` as an additional search argument. (not to be confused with the extras of the same name)

Default is “media=both” returning both photos and videos.

Displaying videos: just funny photos

For each uploaded video we generate a JPG preview in a range of sizes. Identical to what we do for photos.

Read the documentation for flickr.photos.getSizes() to get you started on how to display Flickr photos.

Playing videos: constructing the embed code

We don’t currently provide a way to get to the FLV for a video. (the Flash encoded video file) We’re looking into making this possible. In the mean time if you want to display watch-able videos you’ll need to embed our video player.

In addition to the photo height and width of the preview images, videos also have a stream height and stream width which we set when we process videos during upload. While you can make the video player any size you want the videos are going to look much better if displayed at the proper size.

You can get the stream height and stream width and the URL for the video player using the standard flickr.photos.getSizes() method:

<sizes canblog="1" canprint="1" candownload="1">
<size label="Square" width="75" height="75" source="http://farm2.static.flickr.com/1423/2345938910_846d9c1be9_s.jpg" url="http://www.flickr.com/photos/revdancatt/2345938910/sizes/sq/" media="photo"/>
... standard getSizes stuff ...
<size label="Video Player" width="500" height="375" source="http://www.flickr.com/apps/video/stewart.swf?v=49235&photo_id=2345938910&photo_secret=846d9c1be9" url="http://www.flickr.com/photos/revdancatt/2345938910/" media="video"/>
</sizes>

Alternately the stream width and height are included in the new video element returned by flickr.photos.getInfo()
:

...
<video ready="1" failed="0" pending="0" duration="14" width="500" height="375" />
</photo>
....

Generating Embed Code

The player takes a height, a width, a photo id, a photo secret (required for playing non-public videos), and the argument flickr_show_info_box, which when set to layers over top of the video videographer, and video title info when the video isn’t playing.

I’m not going to go over in depth the markup for the player, but here is a quick and dirty PHP function for generating it:

#
# takes a "Video Player" source from flickr.photos.getSizes() and optional display arguments
#

function flickr_video_embed($video_url, $width="400", $height="300", $info_box="true") {

    $markup = <<<EOD
<object type="application/x-shockwave-flash" width="$width" height="$height" data="$video_url"  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="flashvars" value="flickr_show_info_box=$info_box"></param> <param name="movie" value="$video_url"></param><param name="bgcolor" value="#000000"></param><param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="$video_url" bgcolor="#000000" allowfullscreen="true" flashvars="flickr_show_info_box=$info_box" height="$height" width="$width"></embed></object>
EOD;
    return $markup;

}

Videos in the feeds

Videos, unsurprisingly, are included in all of the various RSS and Atom feeds which contain photos. For each video entry we include a MediaRSS content element that points to the SWF player, and has a content type of “application/x-shockwave-flash”. Additional we include the stream height and width as the height and width elements in the content element.

In RSS 2.0 feed we also include an enclosure element.

Uploading Videos

Upload videos just like you would a photo. We’ll do the magic to figure out whether the uploaded file is a video or a photo. You’ll generally want to use the asynchronous upload methods as videos tend to be larger, and take more time to upload.

Videos need to be “transcoded” — turned into an FLV which is playable on the Web. As this takes time videos aren’t always immediately available for viewing. You can check the processing status of a video using flickr.photos.getInfo(), and examining the video element.

<video ready="1" failed="0" pending="0" duration="14" width="0" height="0"/>

ready is watchable, pending is still being transcoded, and failed videos need to be re-uploaded. (possibly in a different format)