KWIKplayer Design Studio

KWIKplayer allows for full customisation of the player at setup, it can include both color and logo customisation.

In order to enable customisation for the player, and JSON object named "designStudio" needs to be added to the player.

designStudio contains all the possible customisation that can be added to the player.

One or more items can be included in the object. When an item is not included in the player, the default value for that item will be set instead. Color options cab be set either by number ('#ff00ff') or by rgba function ('rgba(0,0,0,0.5'). Transpancy set in rgba representation of the colours will be present on the player.

designStudio includes the following settings:

• logo: takes a string link variable (either URL or local reference) to a watermark image that you would like to place on your image.
• hideLogo: takes a boolean variable that signifies whether the watermark will be hidden in the player or no.
• link: takes a string or a URL link. Clicking on the watermark will open a new tab visiting the contained link.
• position: takes a string variable that can be one of four values: "top-right", "top-left", "bottom-left" and "bottom-right". Each one of those values will place the watermark on the corresponding corner of the player.
• logoMargin: takes a number. The number represent the number of pixels that will be added as a padding to the watermark. The padding will be added on all directions.
• primary: takes a string represenation of colour. This colour setting will set the corresponding colour on all the buttons that are present on the player.
• highligh: takes a string representation of colour. This colour setting will set the corresponding colour on all the player's items that are highlighted by the user (mouse hover over item).
• background: takes a string representation of colour. This colour setting will set the corresponding colour on all background items of the player. Backgroun items include, the bar at the bottom of the player, all the backgrouns of the pop items, and others.
• thumbContainerBG: takes a string representation of colour. This colour setting will set the corresponding colour on the background of the thumbnails container.
• playerProgressColor: takes a string representation of colour. This colour setting will set the corresponding colour on the left side of the player's progress bar (how much of the video has been played).
• loadProgressColor: takes a string representation of colour. This colour setting will set the corresponding colour on the part of the video that has downloaded in the player's progress bar.
• progessHolderColor: takes a string presentation of colour. This colour setting will set the corresponding colour on the remainder of the player's progress bar.

 <script>
    kwikMotion("player", {
            sources: [          //video sources
                {file: "https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/admin/515002-R204MDrB22W6kG8.smil/playlist.m3u8"},
                {file: "https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/admin/515002-R204MDrB22W6kG8.smil/manifest.mpd"},
                {file: "https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/admin/515002-R204MDrB22W6kG8.smil/Manifest"}],
                tracks: [{      //thumbnail tracks
                    file: "https://my-website.com/path/to/my/thumbnails.vtt",
                    kind: "thumbnails"
                }
                ],
            designStudio: {         //our design options object
                logo: "http://www.my-website.com/path/to/my/watermark.png", //URL to the watermark image.
                hideLogo: false,             //setting the variable to hide our watermark to false.
                link: "http://www.my-website.com",  //setting the link to be the link that clicking on the watermark will take the user to.
                position: "bottom-left",            //setting the watermark position to bottom left.
                logoMargin: "30",                   //giving the watermark a 30 pixels.
                primary: '#ffc0cb',                 //giving our player's buttons a pink colour
                highlight: '#0000ff',               //giving the highligh a blue color.
                background: '#800080',              //giving the player's items background a purple colour
                thumbContainerBG: '#ffa500',        //giving the thumbnails container an orange color
                playProgressColor: '#ff0000',       //giving the progressed part of the player's progress bar a red colour
                loadProgressColor: '#00ff00',       //giving the loaded part of the player's progress bar a green color 
                progressHolderColor: '#ffff00'      //giving the remainder of the player's progress bar a yellow color
            }
        });
 </script>