Widget Development playground

The following sample video contains code examples showcasing methods, property types, and usage scenarios in the widget development environment.

Playground Video

Defined Properties for Playground

HTML Code

1. <div class='c-{{uid}}'>
   <div class='col'>
   <span>uid (Unique Identifier)</span>
   <span>{{uid}}</span>
   </div>
   <span>Text</span>
   <span>{{text}}</span>
   </div>
   <span>Color</span>
   <span class='color'>{{color}}</span>
   </div>
   <span>Image</span>
   <img src='{{image}}' width='100' height='100' />
   <span>Video</span>
   <video class='video' controls nodownload><source src='{{video}}' /></video>
   <span>Text List</span>
   <ul> {{#each textList}} <li>{{this}}</li> {{/each}} </ul>
   <span>Image List</span>
   <div class='image-list'> {{#each imageList}} <img src='{{this}}'/> {{/each}} </div>
   <span>Select Type</span>
   <span>{{this}}</span>

CSS Code

1. .c-{{uid}}{ width: 100%; height: 100%; background: #FFF; padding: 1rem; overflow-y: scroll; display: flex; justify-content: space-between; }
2. .c-{{uid}} .col{ width: 50%; }
3. .c-{{uid}} .col > div{ display: flex; flex-direction: column; margin-bottom: .75rem; }
4. .c-{{uid}} .col > div span:first-child{ font-weight: bold; }
5. .c-{{uid}} .color{ color: {{color}}; }
6. .c-{{uid}} .video{ width: 300px; }
7. .c-{{uid}} .image-list img{ width: 64px; height: 64px; margin-right: 10px; }
8. .c-{{uid}} button{ width: 200px; }

Javascript Code

1. // Unique named variable declaration: var foo_{{uid}} = 'bar'; console.log('Foo: ', foo_{{uid}});
2. // Unique named function declaration: function testFn_{{uid}}(){}
3. // Set Variable: $('.c-{{uid}} .score-variable-30').click(function() { c8PlayerApi.setVariable('score', 30); });
4. // Set/Get Variable: $('.c-{{uid}} .score-variable-add-10').click(function() { var prevState = c8PlayerApi.getVariable('score'); c8PlayerApi.setVariable('score', prevState + 10); });
5. // Set Variable: $('.c-{{uid}} .license-variable-enterprise').click(function() { c8PlayerApi.setVariable('license', 'Enterprise'); });
6. // Widget Props: $('.c-{{uid}} .widget-props').click(function() { console.log(c8PlayerApi.getWidgetProps()); });
7. // Play Video: $('.c-{{uid}} .play').click(function() { c8PlayerApi.play(); });
8. // Pause Video: $('.c-{{uid}} .pause').click(function() { c8PlayerApi.pause(); });
9. // Check Paused: $('.c-{{uid}} .paused').click(function() { console.log('Paused: ', c8PlayerApi.paused()); });
10. // Set Current Time: $('.c-{{uid}} .set-current-time').click(function() { c8PlayerApi.currentTime(12); });
11. // Hide Controls: $('.c-{{uid}} .hide-player-controls').click(function() { c8PlayerApi.hideControls(); });
12. // Show Controls: $('.c-{{uid}} .show-player-controls').click(function() { c8PlayerApi.showControls(); });
13. // Set Volume: $('.c-{{uid}} .set-volume').click(function() { c8PlayerApi.volume(0.5); });
14. // Mute Volume: $('.c-{{uid}} .mute-volume').click(function() { c8PlayerApi.volume(0); });
15. // Subtitles: $('.c-{{uid}} .subtitles').click(function() { console.log(c8PlayerApi.subtitles()); });
16. // Set Subtitle: $('.c-{{uid}} .set-sub-en').click(function() { c8PlayerApi.subtitle('en'); });
17. // Launch Fullscreen: $('.c-{{uid}} .launch-fs').click(function() { c8PlayerApi.launchFullscreen(); });
18. // Set Quality Level: $('.c-{{uid}} .set-quality-level-360p').click(function() { c8PlayerApi.qualityLevel(2); c8PlayerApi.play(); });