The following sample video contains the codes that exemplify the methods, property types and usage scenarios used in the widget development environment. .

Playground Video

1. // Unique named variable declaration
   
   var foo_{{uid}} = 'bar'
   console.log('Foo: ', foo_{{uid}});
   
   
   // unique named function declaration
   function testFn_{{uid}}(){
     
   }
   
   
   // Set Variable
   $('.c-{{uid}} .score-variable-30').click(function() {
       c8PlayerApi.setVariable('score', 30);
   });
   
   
   // Set variable / Get variable
   $('.c-{{uid}} .score-variable-add-10').click(function() {
     var prevState = c8PlayerApi.getVariable('score');
     c8PlayerApi.setVariable('score', prevState + 10);
   });
   
   
   // Set Variable
   $('.c-{{uid}} .license-variable-enterprise').click(function() {
       c8PlayerApi.setVariable('license', 'Enterprise');
   });
   
   
   // Variables
   $('.c-{{uid}} .variables').click(function() {
     console.log(c8PlayerApi.getVariables())
   });
   
   
   // Widget Props
   $('.c-{{uid}} .widget-props').click(function() {
      console.log(c8PlayerApi.getWidgetProps());
   });
   
   
   // Widget Prop
   $('.c-{{uid}} .widget-prop-single').click(function() {
      console.log(c8PlayerApi.getWidgetProp('textArea'));
   });
   
   
   // Track Props
   $('.c-{{uid}} .track-props').click(function() {
      console.log(c8PlayerApi.getTrackProps());
   });
   
   
   // Track prop
   $('.c-{{uid}} .track-prop-duration').click(function() {
     // second parameter is default value
      console.log(c8PlayerApi.getTrackProp('duration', 10));
   });
   
   
   // Widget prop action
   $('.c-{{uid}} .action-feature-btn').click(function() {
       c8PlayerApi.executeWidgetPropActions("actionFeature");
   });
   
   
   // Runtime
   $('.c-{{uid}} .runtime').click(function() {
       console.log(c8PlayerApi.getRuntime());
   });
   
   
   // Play video
   $('.c-{{uid}} .play').click(function() {
      c8PlayerApi.play();
   });
   
   
   // Pause video
   $('.c-{{uid}} .pause').click(function() {
      c8PlayerApi.pause();
   });
   
   
   // Checks whether video is paused.
   $('.c-{{uid}} .paused').click(function() {
      console.log('Paused: ', c8PlayerApi.paused());
   });
   
   
   // Current time
   $('.c-{{uid}} .current-time').click(function() {
      console.log('Current Time: ', c8PlayerApi.currentTime().toFixed(2));
   });
   
   
   // Set current time
   $('.c-{{uid}} .set-current-time').click(function() {
      c8PlayerApi.currentTime(12);
   });
   
   
   // Hide player controls
   $('.c-{{uid}} .hide-player-controls').click(function() {
      c8PlayerApi.hideControls();
   });
   
   
   // Show player controls
   $('.c-{{uid}} .show-player-controls').click(function() {
      c8PlayerApi.showControls();
   });
   
   
   // Volume
   $('.c-{{uid}} .volume').click(function() {
      console.log('Volume: ', c8PlayerApi.volume());
   });
   
   
   // Set volume
   $('.c-{{uid}} .set-volume').click(function() {
      c8PlayerApi.volume(0.5);
   });
   
   
   // Mute volume
   $('.c-{{uid}} .mute-volume').click(function() {
      c8PlayerApi.volume(0);
   });
   
   
   // Returns available subtitles
   $('.c-{{uid}} .subtitles').click(function() {
      console.log(c8PlayerApi.subtitles());
   });
   
   
   // Current subtitle
   $('.c-{{uid}} .subtitle').click(function() {
      console.log(c8PlayerApi.subtitle());
   });
   
   
   // Set subtitle
   $('.c-{{uid}} .set-sub-en').click(function() {
      c8PlayerApi.subtitle('en');
   });
   
   
   // Set subtitle
   $('.c-{{uid}} .set-sub-de').click(function() {
      c8PlayerApi.subtitle('de');
   });
   
   
   // Set subtitle
   $('.c-{{uid}} .set-sub-none').click(function() {
      c8PlayerApi.subtitle('off');
   });
   
   
   // Launch fullscreen
   $('.c-{{uid}} .launch-fs').click(function() {
      c8PlayerApi.launchFullscreen();
   });
   
   
   // Exit fullscreen
   $('.c-{{uid}} .exit-fs').click(function() {
      c8PlayerApi.exitFullscreen();
   });
   
   
   // Playback rate
   $('.c-{{uid}} .playback-rate').click(function() {
      console.log(c8PlayerApi.playbackRate());
   });
   
   
   // Set playback rate
   $('.c-{{uid}} .set-playback-rate-0-5').click(function() {
      c8PlayerApi.playbackRate(0.5);
   });
   
   
   // Set playback rate
   $('.c-{{uid}} .set-playback-rate-1').click(function() {
      c8PlayerApi.playbackRate(1);
   });
   
   
   // Set playback rate
   $('.c-{{uid}} .set-invisible').click(function() {
      c8PlayerApi.setInvisible();
      //c8PlayerApi.setVisible();
   });
   
   
   // Returns available quality levels if exist
   $('.c-{{uid}} .quality-levels').click(function() {
      console.log(c8PlayerApi.qualityLevels());
   });
   
   
   // Current quality level of the video
   $('.c-{{uid}} .quality-level').click(function() {
      console.log(c8PlayerApi.qualityLevel());
   });
   
   
   // Sets quality level of the video of given quality level ( Set "auto" for Auto level )
   $('.c-{{uid}} .set-quality-level-360p').click(function() {
      c8PlayerApi.qualityLevel(2);
      c8PlayerApi.play();
   });
   
   
   /**
    *  EVENTS
    */
    c8PlayerApi.on("play", function(){
       console.log("Play Event");
     })
   
   
     c8PlayerApi.on("pause", function(){
       console.log("Pause Event");
     })
   
   
     c8PlayerApi.on("visibilityChange", function(visible){
       console.log("VisibilityChange Event:", visible)
     })
   
   
     c8PlayerApi.on("playbackRateChange", function(playbackRate){
       console.log("PlaybackRateChange Event:", playbackRate)
     })
   
   
     c8PlayerApi.on("qualityLevelChange", function(quality){
       console.log("QualityLevelChange Event:", quality)
     })
   
   
     c8PlayerApi.on("fullscreenChange", function(fullscreen){
       console.log("FullscreenChange Event:", fullscreen)
     })
   
   
     c8PlayerApi.on("widgetDestroy", function(){
       console.log("WidgetDestroy Event")
     })
   
   
     c8PlayerApi.on("variableChange", function(variableName, prevValue, newValue){
       console.log("VariableChange Event:", variableName, prevValue, newValue)
     })
   
   
   /*
   
   
     // Returns object of current audio track if exist, otherwise it returns null;
     c8PlayerApi.audioTrack(); 
     {
       "label": "Spanish",
       "value": "es"
     }
     
     // Sets audio track of the video by given index
     c8PlayerApi.audioTrack(1);
     
     // Returns available audio tracks if exist, otherwise it returns an empty array
     c8PlayerApi.audioTracks(); 
       [
         {
           "label": "English",
           "value": "en"
         },
         {
           "label": "Spanish",
           "value": "es"
         }
       ]
       
       // Returns authenticated user info
       c8PlayerApi.getAuthenticatedUser(); 
       {
         name: 'John',
         surname: 'Doe',
         username: 'john.doe'
       }
       
       // Store key-value pair data
       c8PlayerApi.postData(payload).then(function(res){
   
   
       });
       
       // Returns stored data
       c8PlayerApi.getData().then(function(res){
         console.log(res)
       });
   */