Basic Video Search API usage example
1. Let's run a search and get some video data
For this example, we're going to use the CURL library in PHP to run a search and get video data back. Here's the code to pull in the data: refinement_content_types=4 is telling the API to only return Full Episodes. sort=date tells the API to return the newest matching videos and you'll have to swap in your own values for client_id and client_key. In this example we're using php, so we've asked for the output_format=php option and that lets us do a really simple unserialize() call to get an associative array of the data. If you're using another language, like python, you can use the default output_format of json and your language's json parser to do the same job.
2. Now let's generate the html for the video results
Now, using the data we just fetched, we're going to generate some html markup for the latest episodes. There are two interesting things here that you should take note of. One, the <img> tag is given just a placeholder value for the src attribute and is instead given a background image corresponding to the sprite image returned by the API. Also, notice the additional class name applied to the frame li element. It's p{$frame['sprite_position']}. This will help us display the correct part of the sprite for each frame. We'll explain more about this in step #4.
3. Time to style our markup
We've generated some html for each video, but we need to add some CSS to make them look nice. Here's the css:
And here's what this looks like:
-
30 Rock: Ep. 406: Sun Tea
Kenneth is on a mission to make TGS green-friendly, while Liz faces a real estate dilemma. -
30 Rock: Sun Tea
Kenneth is on a mission to make TGS green-friendly, while Liz faces a real estate dilemma. -
30 Rock: Sun Tea
30.rock.s04e06
4. Almost done, but wait, there's a problem
Our search results look great, except for one thing. All of the images in the summary look the same! Explaining why is probably the trickiest part of this exercise, so bear with us, it's not going to be too bad.
In order to speed up page load times and reduce overhead, VideoSurf's APIs do not provide you with an image for each individual frame in the visual summary. Instead, we provide you with the url to one image that has all the best frames stitched together, a sprite. Then, using a little CSS magic, you can get each frame to display the correct part of the larger image. This technique is called CSS Sprites and you can learn more about it from CSS Tricks and A List Apart.
In this example, this means that the page uses only 3 images for the summaries instead of 24, and this makes the page load much more smoothly. The effect is much more pronounced if you show more than 3 search results.
So, how do we do it? Simple.
- Add a class name to each frame of the summary that indicates which part of the sprite to show for it. The API returns a value called sprite_position for each frame in the summary. Position 0 means it's the left-most frame in the larger stitched image. Position 5 means it's 6th from the left, and so on. Back in step 2, we added this number as a class on each frame container in the summary.
- Use CSS to tell the browser how to display the image in each position for the sprite. It's basically just shifting the sprite to the left by the width of one image, 64px, for each position.
5. That's it, we're finished!
After adding that last bit of CSS, all the images shift into place correctly. Here's the final result:
-
30 Rock: Ep. 406: Sun Tea
Kenneth is on a mission to make TGS green-friendly, while Liz faces a real estate dilemma.
-
30 Rock: Sun Tea
Kenneth is on a mission to make TGS green-friendly, while Liz faces a real estate dilemma.
-
30 Rock: Sun Tea
30.rock.s04e06