Note that the Ajax API is a legacy API, we recommend using one of our newer APIs instead.

This is an example of the Ajax API in use. The example searches for videos based on title in an account and presents the first result with thumbnail and description. The user can click on the thumbnail to load the player for that video.

Prerequisites

Before you get started programming, make sure you have access to the following:

• Ajax API auth token
• Ajax API documentation

Searching for videos

With the ps.js object included and your picsearch_ajax_auth key value set you can call the ps.search function. The example below specifies to constrain the search to the title field only and to return meta data: thumbnail, title, mediaid, width and height.

ps.search(id, {"count": 1, "fields": ["thumbnail", "title", "mediaid", "width", "height"], "constraints": ["title"], "order": "posted"}, success_handler);

Getting meta data

The success_handler function receives a data parameter containing the meta data as an array of media objects.

{
   if (data.count == 0) {
    document.getElementById("result").innerHTML = "
No results
";
      return false;
   }
   var media = data.media[0];
   document.getElementById("result").innerHTML = " + media.mediaid + """)" src="" + media.thumbnail + ""> Media title: " + media.title + " - Click image to show video.";
}

Embedding a video

Using the mediaid object, it is easy to get all the relevant data to embed the video.

function click_image(mediaid) {
    //Lookup details for the video with specified mediaid
    ps.getMediaDetails(mediaid, {
        "fields": ["mediaid", "width", "height"]
    }, function (media) {
        document.getElementById("result").innerHTML += "
";
        //Embed the video in the div tag with id "player" using the width and height parameters for the video
        ps.embed({
            "containerId": "player",
            "width": media.width,
            "height": media.height,
            "mediaid": media.mediaid,
            "autoplay": true,
            "loop": false
        });
    });
};

Full example

Download the full example html from the link at the bottom of the page. The demo code is connected to one of our accounts, try for example searching for "screen9" to see it in action.