123on Documentation

123on javascript SDK

Load the 123on js SDK asynchronously:


  (function(one, two, three, on, sdk) {
      var vars = {
          _q: []
      };
      while (on.length) {
          var func = on.shift();
          sdk(vars, func);
      }
      one[three] = vars;
      var a, b = two.getElementsByTagName('script')[0];
      if (two.getElementById(three)) return;
      a = two.createElement('script');
      a.id = three;
      a.src = 'https://cdn.123on.com/js/123on-sdk-v1.latest.min.js';
      b.parentNode.insertBefore(a, b);
  }(window, document, 'SDK123on', ['init', 'embed'], function(b, r) {
      b[r] = function() {
          b._q.push([r, arguments])
      }
  }));

Initialize SDK:


  SDK123on.init();

Embed video(s):


  SDK123on.embed('6307582792695808');

Options

SDK123on.init(params)

params:

Name	Description	Default value
callbackVideoFetched	Callback executed when any video is fetched	function(params) {}
callbackVideoStarted	Callback executed when any video starts	function(params) {}
callbackVideoPaused	Callback executed when any video is paused	function(params) {}
callbackVideoEnded	Callback executed when any video ends	function(params) {}
customEventParams	Custom parameters as dictionary that will be returned on callbacks	{}

SDK123on.embed(videoId, params)

videoId: Video's unique identifier

params:

Name	Description	Default value
containerId	Container to append iframe to	null (body element will be used)
height	Height of container surrounding video	N/A
allowFullscreen	Enable/disable fullscreen for iframe	true
autoplay	Should autoplay with sound muted	false
showProgressbar	Show/hide progress bar in video	true
showUIElements	Show/hide ui elements, e.g. 123on logo	true
bgColor	Use color as background in container	None
bgGradientColor1	Use gradient as background with this as first color, e.g. red	None
bgGradientColor2	Use gradient as background with this as second color, e.g. #ff00ff	None
bgGradientDirection	Direction of background gradient, e.g. top	bottom
bgImageUrl	Use an image as background in container, e.g. https://mydomain.com/myimage.jpg	None
bgImageRepeat	Repeat background image, e.g. repeat or repeat-x	no-repeat
callbackVideoFetched	Callback executed when this video is fetched	function(params) {}
callbackVideoPaused	Callback executed when this video is paused	function(params) {}
callbackVideoStarted	Callback executed when this video begins	function(params) {}
callbackVideoEnded	Callback executed when this video ends	function(params) {}
customEventParams	Custom parameters as dictionary that will be returned on callbacks	{}

Example

              

  <!DOCTYPE html>
    <html lang=“en”>
      <head>
          <meta charset=“utf-8”>
          <title>123on javascript SDK example</title>
      </head>
      <body>
          <div id=“my-video”></div>
          <script>
              (function(one, two, three, on, sdk) {
                  var vars = {
                      _q: []
                  };
                  while (on.length) {
                      var func = on.shift();
                      sdk(vars, func);
                  }
                  one[three] = vars;
                  var a, b = two.getElementsByTagName('script')[0];
                  if (two.getElementById(three)) return;
                  a = two.createElement('script');
                  a.id = three;
                  a.src = 'https://cdn.123on.com/js/123on-sdk-v1.latest.min.js';
                  b.parentNode.insertBefore(a, b);
              }(window, document, 'SDK123on', ['init', 'embed'], function(b, r) {
                  b[r] = function() {
                      b._q.push([r, arguments])
                  }
              }));
          </script>
          <script>
              SDK123on.init({
                  callbackVideoStarted: function(params) {
                      // do something when video starts

                      /*
                      Next line prints this object:
                      {
                          videoId: '6307582792695808',
                          myCustomGlobalParam: 'faaf6afd-8e5e-41d5-8ff0-25e703702460',
                          myCustomVideoParam: 'b8f01f6e-2a9d-43bf-ba87-4145301e825e'
                      }
                      */
                      console.log(params);
                  },
                  customEventParams: {
                      // define custom global parameters for callbacks
                      myCustomGlobalParam: 'faaf6afd-8e5e-41d5-8ff0-25e703702460'
                  }
              });
              SDK123on.embed(6307582792695808, {
                  containerId: 'my-video',
                  width: '600',
                  height: '383',
                  allowFullscreen: true,
                  showProgressbar: false,
                  showUIElements: false,
                  customEventParams: {
                      // define custom video parameters for callbacks
                      myCustomVideoParam: 'b8f01f6e-2a9d-43bf-ba87-4145301e825e'
                  }
              });
          </script>
      </body>
    </html>