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-1.0.4.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
callbackVideoStarted Callback executed when any video starts 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
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-1.0.4.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>
  

Logo

© v1-123on. 2018. All rights reserved.


Terms of service | Privacy Policy | Cookies