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>