Vuedotai Javascript SDK - Readme

Introduction

This document covers the functional scope of the Javascript library developed by Mad Street Den to publish shoppable videos on a third party webpage. This can be used by clients who wish to publish the videos that have been made shoppable by Mad Street Den.

The name of the Javascript library is vuedotai(From the brand name - vue.ai). This SDK has internal methods which can be called on the front end web pages, according to the functionality required.

SDK methods, definitions, examples

  • vuedotai: Create an instance of the Vuedotai class. You can do it the following way.
var api_key = ‘+0pS3cr3+d0n0+5h@r3’(sample);
var client = Vuedotai(api_key);
(OR)
var client = new Vuedotai(api_key);
  • getVideos: Method to get the list of videos. Parameters are optional. When no parameters are passed then this method returns a promise object. Alternatively you can also pass in the success and failure callback if you don’t wish to use the promise object. Additional filtering options can be passed key value pair object. Set the collection_id key in filter option to get videos from a particular collection. collection_id value is defaulted to 1 if not passed.

Invoked with callbacks:

var successCB = function(data){console.log(‘data : ’, data);};
var failureCB = function(e){console.error( ‘Some error occured : ’, e );};
var filter = {collection_id : 1};
client.getVideos(successCB, failureCB, filter);

Invoked without params:

var filter = {collection_id : 1};
var deferred = client.getVideos(filter);
deferred
    .then(function(data){ console.log(‘data:’, data); })
    .catch(function(e){console.error(‘Some error occured : ’, e)});

The response for this will be of the form

Response data:
[
// list of videos
{
    // unique identifier for the video
    “id”: “1”,

    // video source. List of all the video source.
    “video_source”: [{src: “static/media/1.mp4”, type: "video/mp4", code: "mp4"}],

    // Video title
    "title": "<Product title>",

    // thumbnail image url for the video
    "thumbnail": {
        "small": "http://demo.vue.ai/stv/static/images/video-thumbnail-1.png",
        "medium": "http://demo.vue.ai/stv/static/images/video-thumbnail-1.png",
        "large": "http://demo.vue.ai/stv/static/images/video-thumbnail-1.png"
    },

    // video description for info screen
    “description”: “<Product description>”
}
]
  • player: Method to create a player instance. Parameters are passed in as an object of key-value pairs. This will create a player in the container supplied in the config parameters
<div id=”container_id”></div>
var player = client.Player({
  containerNode: document.getElementById(‘container_id’),
  videoId: 1
})

Optional configurations for the player:

  • autoStart : true (or) false

    Starts playing video as soon as it is loaded. Default value is true. If the value is set to false then player.start() method needs to be invoked to start the player.

  • productRenderer: function(el, p){}

    This is used to override the construction of the product tile. The supplied renderer method is called for constructing the product tile. The product container element and the product data is passed at the time of invocation.

  • mobileView : true (or) false

    This is used to load mobile layout of the player.

  • showMatchType : true (or) false (or) <Match Type string>

    Shows a label at top of the product image indicating that the product is a similar one. Default value is false. If string value is provided then the string will be displayed instead of default label 'Similar Look'. Only visually similar products are indicated with this label and no label is added for the exactly matching product.

  • priceText : function(price, product){}

    This is used to override the price text displayed in the product tile. The method is called with price and product data.

  • productTitle : function(title, product){}

    This is used to override the product title displayed in the product tile. The method is called with title and product data.

  • buttonText : string (eg: 'Add to Cart')

    This is used to override the label of 'Shop Now' button displayed in product tile.

Player Methods:

  1. play: Plays the video if paused.
  2. pause: Pauses the video if playing
  3. subscribe/unsubscribe: You can subscribe/unsubscribe to events of the player using the subscribe method:

    var handler = function(product){
              console.log(‘user clicked buy button. Product info: ’, product)
          };
              Subscribe to an event
          player.subscribe(‘button-clicked’, handler);
    
              Unsubscribe an event
          player.unsubscribe(‘button-clicked’, handler);

    The list of events that can be subscribed to are:

        • button-clicked: when the user clicks a button in the product description area
        • loaded: when the player has loaded all data.
        • started: fires first time when the player has started playing.
        • played: fires every time the video resumes to play.
        • paused: fires every time the video is paused.
        • ended: fires when video playback has ended.
        • The ended event is fired with secondary parameter containing the list of products, like,

    player.subscribe('ended', function(player, products) {
         console.log('Playback ended!!!');
        });

    • seeked: fires when the video is seeked.
    • timeupdate: fires every time the frame has changed

    Note: The payload that is sent for the button-clicked event will contain all product data as processed and stored on our end, in MAD format.

  4. currentTime: Get/Set the current time of the video

    To get the video current time player.currentTime()

    To change the video current time player.currentTime(10)

  5. duration: Gets the total video duration

  6. mute: get/set. Only boolean values accepted.

    To change player mute status

    player.mute(true)

    To get the current mute status

    player.mute() // returns true or false
  7. dispose: To safely dispose the player.
  8. getProducts: To get list of all products from shoppable frames in the video.

This library is a work in progress. Further development on the library will be taken up based on the requirements from clients and future features on Shop the video.

  • 2
  • 01-Nov-2017
  • 920 Views