Example: Search and display video

    Follow

    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:

    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 = "<p>No results</p>";
          return false;
      }
       var media = data.media[0];
      document.getElementById("result").innerHTML = "<img id='thumbnail' onclick='click_image(\"" + media.mediaid + "\")' src='" + media.thumbnail + "'> Media title: <strong>" + media.title + "</strong> - 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 += "<div id='player'></div>";
            //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.

    Was this article helpful?
    0 out of 0 found this helpful

    Comments