KWIKmotion Player V8 - Complete Documentation | Setup, API & Integration Guide

⚠️ Player V8 - Maintenance Mode

Player V8 is no longer receiving updates, new features, or enhancements. It is maintained in legacy mode for existing implementations only. For all new integrations, please use Player V9, which features modern architecture, active development, and ongoing support.

📖

Overview

KWIKmotion Player V8 is a powerful, feature-rich JavaScript video player supporting multiple streaming formats, customization options, and advanced features for professional video delivery.

Key Features

Multiple streaming protocols (HLS, DASH, Smooth Streaming)
Responsive and fluid layouts
Closed captions and subtitles support
Playlist functionality
Analytics integration (Google Analytics)
Chromecast and Airplay support
360° and VR video playback
Advertisement integration
Customizable player design
Comprehensive API for programmatic control

⚙️

Setup & Configuration

Setup

KWIKPlayer is very easy to setup and handle.

Step 1

You have to include your script in the html page:

The script can be included in one of two ways:

1- In the header:


 <head>
    ...
    <script type="text/javascript"
    src="https://player.kwikmotion.com/ClientsTemplates/your/kwikplayer/embed/link.js"></script>
    ...
 </head>

2- Reference the script in the html code:


 <span id="error_message">Your desired error message.</span>

    <!--This is the script where we would define the player and add it.
    First we import the KWIK player video player -->

    <script type="text/javascript"
        src="https://player.kwikmotion.com/ClientsTemplates/your/kwikplayer/embed/link.js"></script>
 ....

Step 2: Adding the player to your html code:

1- Define a "div" section in which you will place your player.

Make sure to choose a unique ID for your video container because this ID will be used later as a reference for the player in all the API call that you will make.


 <div id="player_div_id"></div>

2- Define a div where you will place your error message as well as add the script that will define your player.


 <body>
    ...
    <div id="error_message_div" style="display: none; height: 50px; position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center;
    color: white; font-size: 20px; max-width: 500px;
    width:100%; font-family: Myriad Pro, Arial">

    <span id="error_message">Your desired error message.</span>

    </div>

 </body>

3- Include your script (if you did not choose to include it in the page header).


 <div id="error_message_div" style="...">
    ...
    <script type="text/javascript"
    src="https://player.kwikmotion.com/ClientsTemplates/your/kwikplayer/embed/link.js"></script>
    ...
 </div>

4- Construct your player inside a script tag using the kwikmotion() constructor, making sure to reference the container that we have previously provisioned for the player.

We use the constructor as follows:


 kwikmotion(div_id, player_object);

Where div_id stands for the id that we have given to the player's container. And player_object is a JSON object that repsents the video/playlist source and its settings. And here is an example:


 <div id="error_message_div" style="...">
 ...
 <script>
    kwikMotion("player", {
    width: 720,
    height: 406,
    image: "http://i5.vod-platform.net/transcoderthumbnail?application=ktv1publish&streamname=ktv1&format=jpeg&size=1280x720",
    aspectratio: "16:9",
    sources: [
    {file:
    "https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/admin/515002-R204MDrB22W6kG8.smil/playlist.m3u8"},
    //your video's HLS link provided by VOD-Platform

    {file:
    "https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/admin/515002-R204MDrB22W6kG8.smil/manifest.mpd"},
    //your video's dash link

    {file:
    "https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/admin/515002-R204MDrB22W6kG8.smil/Manifest"}
    //your video's smooth-streaming link
    ],
    });
 </script>
 ...
 </div>

📐

Aspect Ratio

KWIKplayer allows you to choose your player's aspect ratio when contructing it by adding the "apectratio" directive and assigning it to your desired value.

The aspectratio varibale takes a string which is representative of width-to-height ratio.

Below is an example of assigning the player an aspect ratio of "16:9":


 <script>
    ...
    aspectratio: "16:9", //the player's aspect ratio
    sources: [           //the 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"}],
    ...
 </script>

📏

Width & Height

KWIKplayer allows you to assign your player width and height values when constructing it using the "width" and "height" directive when constructing your player.

The numbers assigned to these directives should be in pixels.

Below is an example of assigninhg the player a width of 720 pixels and a height of 406 pixels.


 <script>
    ...
    width: 720,  //the width on the player
    height: 406, // the height of the player
    sources: [   //the 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"}],
    ...
 </script>

🎬

Media ID

Mediaid

When using KWIKplayer, you can assign unique ID to your player when construcing it.

mediaid is used to track your player through analytics as well as other uses.

mediaid takes a string. In the example below we assign to our new player a mediaid of "my_unique_id".


 <script>
    ...
    mediaid: "my_unique_id", //our own unique ID that we gave to the 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"}],
    ...
 </script>

🖼️

Image/Poster

Image

KWIKplayer allows you to use a base image that the player will show before the video plays.

The "image" directive takes a URL string varibale containing the link to the image. the URL can be both a file path and a item's URL.

Below is a basic example of assigning the image directive


 <script>
    ...
    image: "https://your-werbsite.com/path/to/your/image.jpg", //image path 
    // image: "../path/to/your/image.jpg", --file based referencing.
    sources: [                                                 //video srouces.
        {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"}],
    ...
 </script>

⏳

Preload

KWIKplayer allows disabeling the preloading of the videos. This means that videos on the player will no longer download when the player is loaded.

In order to control the preload settings, a "preload" key value needs to be added to the player.

preload takes a string that can be either "auto" or "none".

auto will set the videos to preload on the browser or device. For some devices preloading is disabled by default, therefore this option will not be active even when set to auto.
will prevent videos preloading when the player is loaded. The user needs to start playing the video in order for the video to preload.

When preload key is no included, the default value for this option is auto.


 <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"}],
            //This will disable controls
            preload: "none",        //setting the preload to none
        });
 </script>

🎛️

Controls

You can disable the player's controled from showing or being used by the user. Disabling controls will remove all options from the player, setting the video to play as it was first set up.

In order to choose whether or not the controls show in the player a "controls" key value needs to be added to the player's object.

controls takes a boolean value. When set the true, the controls will be present in the player. When set to false, the controls will be removed from the player. When this key is not included in the player's object, the default value for it is true.

Autostart

KWIKplayer also allows you to automatically play the video once the player is loaded.

In order to enable this feature, an "autostart" key needs to be added to the player's object.

autostart takes a boolean variable. When set to true, the video will automatically play. Else, it would not. If this key is not set, the default value for it is false.


 <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"}],
            controls: false,        //removing the controls from the player
            autostart : true,       //starting the video automatically, because the user will not be able to start it
        });
 </script>

🔇

Mute

KWIKplayer can be set to load with the videos muted.

When this feature is set, the player will always load with mute on. Mute can still be removed by the user (if controls are enabled).

In order to activate this, a "mute" key needs to be added to the player's object.

mute takes a boolean variable of either true or false. When set to true, the videos will load muted. Else, they will load normally. When this key is not included, the default value for it is false.


 <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"}],
            mute : true     //setting our player to load the video muted. 
        });
 </script>

🐛

Debug

KWIKplayer has a debug mode that can be set when the player is included.

When debug mode is enabled, the player will send messages into the console about everything. Those messages can be seen on the browser's developer console.

In order to set the debug mode on the player, a "debug" key needs to be added to the player's object.

debug takes a boolean value of either true or false. When debug is set to true they player would be in debug mode. Else, debug mode is disabled. When no value is set for this key, the default value is false.


 <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"}],
            debug : true        //setting the player in debug mode.
        });
 </script>

⌨️

Player Hotkeys

KWIKplayer has full hotkey integration and allows the users to control the player by using keys.

Below is a list of the hotkeys that can be used to easily deal with the player.

Space bar toggles play/pause.
Left mouse click toggles play/pause.
Left arrow fast plays (rewinds) the video backwards.
Right Arrow fast plays (rewinds) the video forwards.
Up and Down Arrow keys increase and decrease the volume in 10% increments and decrements.
M key toggles mute/unmute.
F key toggles fullscreen off and on.
Double-clicking with the mouse toggles fullscreen off and on.
Number keys from 0-9 seek the video to a relative percentage of it. 0 seeks 0% and 9 seeks 90%.

Try them!

🎞️

Thumbnails

You can add your own unique thumbnail tracks to your videos when constructing the player. Which will be shown when the user hovers over the player progress bar

Thumbnails should be added in a WEBVTT format linked in the video under the "tracks" directive.

The tracks directive is an array of JSON objects that can contain all the related tracks the the video (thumbnails, captions ..etc).

Thumbnails should be added as a JSON object inside "tracks" containing two key values: file and kind.

file directive is a string varibale that should contain either a URL or a local path to your WEBVTT thumbnails file (.vtt).
kind directive is a string variable and it should be set to "thumbnails" to identify the added track as a thumbnail file.

WEBVTT thumbnail format should be written as follows:

 WEBVTT

00:00:00.000 --> 00:00:45.000            //the period that the selected thumbnail will represent
https://static.vod-platform.net/videosthumbsimages/admin/500000/th-515002-1-original-4897589-1.jpg#xywh=0,0,127,90  //the thumbnail file

00:00:45.000 --> 00:01:15.000
https://static.vod-platform.net/videosthumbsimages/admin/500000/th-515002-1-original-4897589-2.jpg#xywh=0,0,127,90

00:01:15.000 --> 00:01:45.000
https://static.vod-platform.net/videosthumbsimages/admin/500000/th-515002-1-original-4897589-3.jpg#xywh=0,0,127,90

00:01:45.000 --> 00:02:15.000
https://static.vod-platform.net/videosthumbsimages/admin/500000/th-515002-1-original-4897589-4.jpg#xywh=0,0,127,90

 ...

Below is an example of adding thumbnail tracks to the video:


 <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: [       //tracks array contains all the different tracks that are added to the video
            {               //our thumbnails object
                file: "https://my-website.com/path/to/my/thumbnails.vtt",   //URL linking to the thumbnail
                // file: "../path/to/my/thumnails.vtt", --local file linking to the thumbnails
                kind: "thumbnails" //identifying the added tracks as thumbnails
            }
            ],
        });
        ...
 </script>

Format (should be written as follows):

📝

Captions

You can add your own caption tracks to your videos when constructing the player. Added caption tracks will be shown as options when the captions icon in the player is pressed.

Captions should be added in a WEBVTT format linked in the video under the "tracks" directive.

The tracks directive is an array of JSON objects that can contain all the related tracks the the video (thumbnails, captions ..etc).

Captions should be added as a JSON object inside "tracks", more than one caption objects can be added. Captions objects contain four key values: file, kind, label and default.

file directive is a string varibale that should contain either a URL or a local path to your WEBVTT captions file (.vtt).
kind directive is a string variable and it should be set to "caption" to identify the added track as a captions file.
label directive is a string variable that contains the string that will be shown on the player captions section to represent the specific tracks
default directive is a boolean variable that represents the whether the current caption is default. Choosing a caption file as a default means that those captions will be automatically displayed when the video plays. Not setting any as a default means that the video will play without captions unless a caption is selected by the user.

WEBVTT caption format should be written as follows:

WEBVTT

00:00:07.800 --> 00:00:08.350           //the duration of the video in which the text will be displayed
behind me right here Saint Patrick's    //the text that will be displayed

00:00:09.160 --> 00:00:11.090
either all going under a one hundred and seventy 

00:00:11.980 --> 00:00:12.460
in dollar restoration 

00:00:14.090 --> 00:00:15.910
to conclude sometime next year 

00:00:16.530 --> 00:00:19.630
animal rights organizations continue to protest the use 

...


 <script>
    kwikMotion("player", {
            sources: [      //the 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: [       //tracks array contains all the different tracks that are added to the video
            {               //our first set of captions added to the video
                file: "https://my-website.com/path/to/my/captions.vtt",     //linking to the captions using a URL
                // file: "../path/to/my/captions.vtt",                      --linking to the captions locally.
                label: "EN",            //identifying the caption by EN code (English) which will be shown on the player
                kind: "captions",       //identifying the track as a captions track
                default: true           //setting these captions to be displayed by default when the video plays.
            }, 
            {               //our second captions
                file: "https://my-website.com/path/to/my/ar-captions.vtt",
                kind: "captions",
                label: "AR",            //labeling these captions by the two letters AR for Arabic
                default: false
            },
            ...
            ],
        });
 </script>

🥽

360° & VR Videos

360/VR Videos

KWIKplayer has full 360 (VR) video support. It includes looking around as well as zoom into the video.

On mobile devices both touch and motion sensors would activate movement. On computers, moving the mouse inside the browser would activate the movement.

In order to allow the player to reconise a video as a 360 video a "stereomode" key needs to be added with the value of "monoscopic".


 <script>
    kwikMotion("player", {
            sources: [              //the 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"}],
            stereomode: 'monoscopic',   //added in order for the player to recognise the video as a 360 video. 
        });
 </script>

📤

Share Button

KWIKplayer allows setting custom sharing, meaning you can add your own link on the share button instead of the video link as well as deactivating the share button entirely.

In order to set custom sharing, a key "sharing" needs to be set in the player's object. It takes a string value respresenting the desired link that will be provided on the share button.

Assigning "sharing" it to a null value ("") would deactivate sharing and remove the share button from the player. Setting it to a URL string would provide that link when the share is clicked. Not including this key value in the player's object would provide the video link when sharing is clicked.


 <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"}],
            //sharing: "",      //we can set the sharing as such if we want to remove sharing entirely
            sharing: "http://www.example.com"   //we have set the sharing button to lead to the website example.com
        });
 </script>

⏯️

Resume Playback

Resume

KWIKplayer can be set to resume videos when the link containing the player has been revisited after previously exiting.

in order to enable this feature, a "resume" key needs to be added to the player's object.

resume is a boolean variable that can be set to either true or false. Setting it to true will enable the resume after exit feature. Else, this feature is disabled. The default variable when no key is set is false.


 <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"}],
            resume : true   //enabling the resume feature in the player
        });
 </script>

📋

Playlist

KWIKplayer can be set to take a playlist instead of a single video.

Adding a playlist to the player instead of a single video will add a playlist button on the player. When clicked, the button will display a list of the videos that are in the playlist by thumbnails and titles.

In order to add a playlist instead of a single video, a "playlist" key needs to be available in the player's object instead of the video's items.

playlist key is an array of objects, whith each object containing the items for a single video. Each video can have its own unique settings at setup.


 <script>
     kwikMotion("player10", {
        //This will add a playlist
        playlist: [     //adding our playlist array
        {               //our first video in the playlist.
            image: 'https://static.vod-platform.net/VideosThumbsImages/motoshowme/400000/Poster-468459-17-1643676-1.jpg',
            sources: [{file: "https://clvod.itworkscdn.net/motorshowvod/smil:itwfcdn/motoshowme/468459-1C7L0R13997yZ4I.smil/playlist.m3u8"},
                {file: "https://clvod.itworkscdn.net/motorshowvod/smil:itwfcdn/motoshowme/468459-1C7L0R13997yZ4I.smil/manifest.mpd"},
                {file: "https://clvod.itworkscdn.net/motorshowvod/smil:itwfcdn/motoshowme/468459-1C7L0R13997yZ4I.smil/Manifest"}],
            title: 'Jaguar I-PACE eTROPHY 2018',
            tracks: [{
                file: 'https://static.vod-platform.net/VideosThumbsImages/motoshowme/400000/468459.vtt',
                kind: 'thumbnails'
            }]
        }, {         //our second video in the playlist
            image: 'https://static.vod-platform.net/VideosThumbsImages/motoshowme/300000/Poster-309021-17-9547220-1.jpg',
            sources: [
                {file: "https://clvod.itworkscdn.net/motorshowvod/smil:itwfcdn/motoshowme/309021-R426ZQDO4W2kLTG.smil/playlist.m3u8"},
                {file: "https://clvod.itworkscdn.net/motorshowvod/smil:itwfcdn/motoshowme/309021-R426ZQDO4W2kLTG.smil/manifest.mpd"},
                {file: "https://clvod.itworkscdn.net/motorshowvod/smil:itwfcdn/motoshowme/309021-R426ZQDO4W2kLTG.smil/Manifest"}],
            title: 'A rich man gives money to people in London',
            tracks: [{
                file: 'https://static.vod-platform.net/VideosThumbsImages/motoshowme/300000/309021.vtt',
                kind: 'thumbnails'
            }]
        }]
    });
 </script>

🎵

MP3 Player

KWIKplayer can be set to only play sound instead of video.

This setting can be added to player with either video sources or music sources. activating this setting will disable video specific settings such as full screen.

In order to set the player as an mp3 player, "type" key value needs to be set on to the string "mp3".


 <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"}],
            type: "mp3",            //setting the player to be mp3 only
        });
 </script>

📊

Google Analytics

Google Analytics Integration

KWIKplayer is compatible with Google Analytics and allows you to collect data from the player.

Google Analytics inegration should be added at the head of the page.

In order to integrate Google Analytics into your page, you would need to:

Add a unique script reference to your google analytics script should be added.
Push the google analytics references into your window.dataLayer parameters.

In the example below, we integrate google analytics into our video with a unique google analytics ID "myUniqueGAid":


 <head>
 ...
 <script async src="https://www.googletagmanager.com/gtag/js?id=myUniqueGAid"></script>
 <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'myUniqueGAid');
 </script>
 ...
 </head>

Integrating Google Analytics into your pages will allow to track events on your page which are tracked by the mediaid.

Some of the events are:

play
pause
Ended
Fullscreen

📺

KWIKplayer includes full ads support. Adds can be added either individually or as preconfigured ad scheduls.

In order to include ads in the player, a JSON package under the name "advertising" needs to be added to the player JSON package.

advertising object contains a single JSON object under the key "schedule", which is where we will store our advertising schedule accordingly.

schedule object contains a collection of JSON objects containing the advertisments that should be shown in the video, with each object representing a single advertisment.

An advertisment object can be given a random key representing the advertisment break. and it should contain two keys: "offset" and "tag".

tag should contain a URL string variable which is a reference to the advertisment that will be played.
offset should contain the time in the video that the advertisment will be played, and in can be represnted in one of several ways:
- Number: which would play the adverstisment after the specied number (in seconds) has passed in the video. For example, setting offset to 33 would mean that the add will play at second 33 of the video.
- String timestamp: a specified timestamp string representation can be added in a string format, which will tell the player to play the ad at that exact time in the video. The timestamp string should following the following format: "hh:mm:ss.ms". For example, setting offset to "01:23:54.435" will play the add at that exact time in the video.
- String 'pre': this will play the advertisment before the video starts.
- String 'mid': this will play the advertisment at exactly in the middle of the video. If the video length has an uneven number of seconds, it will round the number to the next second.
- String 'pos': this will play the advertisment after the end of the video.


 <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"}],
            advertising: {      //adding our advertisment object to the player, in order to make it play ads. 
                schedule: {     //our advertisments schedule. 
                    adbreak1: {     //our first add break
                        offset: 'pre',      //setting this ad to play before the video starts
                        //below we add our video link with the tag variable.
                        tag: 'https://pubads.g.doubleclick.net/gampad/live/ads?sz=400x225&iu=/38740535/AlTazaj-Pre&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&url=[referrer_url]&description_url=[description_url]&correlator=[timestamp]&432423'
                    },
                    adbreak2: {     //our second adbreak
                        offset: '00:01:24:250',     //this ad will play at exactly 1 minute and 24 seconds in the video
                        tag: 'https://pubads.g.doubleclick.net/gampad/live/ads?sz=400x225&iu=/38740535/AlTazaj-Pre&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&url=[referrer_url]&description_url=[description_url]&correlator=[timestamp]&433'
                    },
                    adbreak3: {
                        offset: 'mid',  //this ad will play at exactly middle of the video
                        tag: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=preroll&pod=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6496&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpostpodbumper&url=&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
                    },
                    adbreak7: {
                        offset: 10,     //this ad will play at 10 seconds in the video
                        tag: 'https://pubads.g.doubleclick.net/gampad/live/ads?sz=400x225&iu=/38740535/AlTazaj-Pre&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&url=[referrer_url]&description_url=[description_url]&correlator=[timestamp]&433'
                    },
                    adbreak4: {
                        offset: 'pos',  //this ad wil play after the video ends
                        tag: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=postroll&pod=3&bumper=before&min_ad_duration=0&max_ad_duration=10000&vrid=6496&sb=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpostpodbumper&url=&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
                    }
                }
            }
        });
 </script>

📡

Chromecast & Airplay

Chromecast and Airplay plugins

KWIKplayer has Chromecast and Airplay plugins are enabled by default.

Chromcast plugin allows the users to cast the videos that they are playing onto their chromecast devices, or smart televisions. It requires the player to be used from either a Google Chrome browser or from an Android device.
Airply plugin allows the users to cast the videos that they are playing onto their Apple TVs. It requires the player to be used from either a Safari Browser or an IOS device.

Examples of both plugins can be found below.

Chromecast

Airplay

🚫

Ad Blocker Detection

Ad Blocker

KWIKplayer will automatically detect adBlockeders that are available on browsers/devices.

When an ad blocker is detected, the video will stop playing and will display a message to the user to disable ad blocker if they wish keep watching the video.

Editing this setting requires adding the "adblocker" key variable to the player's object, with the corresponding value. adblocker takes a boolean value. When set to true, the videos will stop playing when the ad blocker is detected. When set to false, this setting will not be activated.

When this key value is not set in the player, the default value will depend on whether or not ads have been added to player. If ads exist, adblocker detection will be activated. If no ads are added to the videos, adblocker will be disabled.


 <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"}],
            adblocker: true,    //setting adblocker detection to true even without ads added to the video
        });
 </script>

🎨

Design Studio

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>

🔧

API Functions Reference

Functions

In this section, you will learn how to use KWIK Player's functions!

play()

Start media playback


                kwikMotion('player').play();

pause()

Pause media playback


                kwikMotion('player').pause();

paused()

Check if the player is paused


                //Get whether the player is paused or not
                var isPaused = kwikMotion('player').paused();


                //If the player is paused, then play. Else, pause
                if (isPaused)
                kwikMotion('player').play();
                else
                kwikMotion('player').pause();

ended()

Returns true if the video has ended, false otherwise.


                //Check ended state
                var endedState = kwikMotion('player').ended();

seeking()

Returns true if the player is in the "seeking" state, false otherwise.


                //Get seeking state
                var isInSeeking = kwikMotion('player').seeking();

seekable()

Returns the TimeRanges of the media that are currently available for seeking to.


                //Seekable function
                var timeRangeSeekable = kwikMotion('player').seekable();

playbackRate()/playbackRate(value)

Gets or Sets the current playback rate. A playbakc of 1.0 repsents normal speed.

The higher value you set, the faster playback you get.

The lower value you set, the slower playback you get.


                //Get current playback rate
                var currentPlaybackRate = kwikMotion('player').playbackRate();

                //Set playback rate to half for instance
                kwikMotion('player').playbackRate(0.5);

Parameters

Name	Type	Required	Description
Rate	Number	Yes	New playback rate value to set

duration(seconds)

Get the length in time of the video in seconds


                //Get the duration of the video played
                var lengthOfVideo = kwikMotion('player').duration();

Note

The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.

Parameters

Name	Type	Required	Description
seconds	Number	Yes	Duration when setting

currentTime()

Get or set the current time (in seconds)


                //Get currentTime
                var whereYouAt = kwikMotion('player').currentTime();

Parameters

Name	Type	Required	Description
seconds	Number\|String	Yes	The time to seek to

remainingTime()

Get the time left (in seconds)


                //Get time left
                var timeRemaining = kwikMotion('player').remainingTime();

loop()/loop(value)

Get/Set the loop attribute of the video element


                //Get loop value
                var loopValue = kwikMotion('player').loop();

                //Activate loop
                kwikMotion('player').loop(true);

                //Deactivate loop
                kwikMotion('player').loop(false);

Parameters

Name	Type	Required	Description
value	Boolean	Yes	True\|False to determine whether the video should loop or no

buffered()

Get a TimeRange object with the times of the video that have been downloaded.

If you just want the percent of the video that's been downloaded, use bufferedPercent.


                // Number of different ranges of time have been buffered. Usually 1.
                var numberOfRanges = bufferedTimeRange.length;

                // Time in seconds when the first range starts. Usually 0.
                var firstRangeStart = bufferedTimeRange.start(0);

                // Time in seconds when the first range ends
                var firstRangeEnd = bufferedTimeRange.end(0);

                // Length in seconds of the first time range
                var firstRangeLength = firstRangeEnd - firstRangeStart;

bufferedEnd()

Returns the ending time of the last buffered time range.


                //Get ending time
                var endTime = kwikMotion('player').bufferedEnd();

bufferedPercent()

Get the percent (as a decimal) of the video that's been downloaded.


                //Get percent
                var percentDownloaded = kwikMotion('player').bufferedPercent();

dispose()

Destroys the KWIK motion player and does any necessary cleanup


                kwikMotion('player').dispose();

currentType()

Get the current type of the player


                //Get the current type of the player
                var currentType = kwikMotion('player').currentType();

error()/error(err)

Set or get the current MediaError


                //Get the current MediaError
                var currentError = kwikMotion('player').error();

                //Set the current MediError
                kwikMotion('player').error(parameter goes here);

Parameters

Name	Type	Required	Description
err	*	Yes	A MediaError or a String/Number to be turned into a MediaError

getCache()

Get object for cached values.


                //Get cache
                var cache = kwikMotion('player').getCache();

src()/src(source)

Get or Set the source of the video played


                //Get the source
                var vidSource = kwikMotion('player').src();

                //Set the source to a newSource
                kwikMotion('player').src(newSource);

Parameters

Name	Type	Required	Description
source	String\|Object\|Array	Yes	The source URL, object, or array of sources

Volume(percentAsDecimal)

Get or set the current volume of the media


                //This is how to get the current volume:
                var howLoudIsIt = kwikMotion('player').volume();

                //This is how to set the volume:
                kwikMotion('player').volume(0.5); // Set volume to half

0 is off (muted), 1.0 is all the way up, 0.5 is half way.

Parameters

Name	Type	Required	Description
percentAsDecimal	Number	Yes	The new volume as a decimal percent

requestFullscreen()

Set the player to be in full screen mode


                //This is how to set the player to be in full screen mode:
                kwikMotion('player').requestFullscreen();

exitFullscreen()

Exit the full screen mode


                //This is how to set the player to exit the full screen mode:
                kwikMotion('player').exitFullscreen();

controls(bool)

Get or set whether or not the controls are showing.


                //This is how to get whether or not the controls are showing:
                 var controlsShow = kwikMotion('player').controls();

                //This is how to set the controls to be shown:
                kwikMotion('player').controls(true);

                //This is how to set the controls to be hidden:
                kwikMotion('player').controls(false);

Parameters

Name	Type	Required	Description
bool	Boolean	Yes	Set controls to showing or not

muted(bool)

Get the current muted state, or turn mute on or off


                //This is how to get whether or not the volume is muted:
                var isVolumeMuted = kwikMotion('player').muted();

                //This is how to set the volume to be muted:
                kwikMotion('player').muted(true);

Parameters

Name	Type	Required	Description
muted	Boolean	No	True to mute, false to unmute

aspectRatio(ratio)

Get/Set the aspect ratio of the player


                //Get the aspect ratio of the player
                var playerAspectRatio = kwikMotion('player').aspectRatio();

                //Set the aspect ratio of the player to 16:9
                kwikMotion('player').aspectRatio("16:9");

Parameters

Name	Type	Required	Description
ratio	String	No	Defines the aspect ratio of the player

autoPlay()/autoPlay(value)

Get/Set the autoplay attribute


                //Get the current autoplay attribute value
                var currentAutoPlay = kwikMotion('player').autoPlay();

                //Set the autoplay attribute to true
                kwikMotion('player').autoPlay(true);

                //Set the autoplay attribute to flase
                kwikMotion('player').autoPlay(false);

Parameters

Name	Type	Required	Description
value	Boolean	Yes	Boolean to determine if the video should autoplay

enterFullWindow()

When fullscreen isn't supported we can stretch the video container to as wide as the browser will let us.


                kwikMotion('player').enterFullWindow();

exitFullWindow()

Exit the full window mode


                //This is how to set the player to exit the full screen mode:
                kwikMotion('player').exitFullscreen();

currentSrc()

Get the current source of the video played


                //Get the current source
                var vidSource = kwikMotion('player').currentSrc();

networkState()

Returns the current state of network activity for the element, from the codes in the list below.

NETWORK_EMPTY (numeric value 0) The element has not yet been initialised. All attributes are in their initial states.
NETWORK_IDLE (numeric value 1) The element's resource selection algorithm is active and has selected a resource, but it is not actually using the network at this time.
NETWORK_LOADING (numeric value 2) The user agent is actively trying to download data.
NETWORK_NO_SOURCE (numeric value 3) The element's resource selection algorithm is active, but it has not yet found a resource to use.


                //Get network state
                var netState = kwikMotion('player').networkState();

height()/height(value)

Returns/Set the player height.


                //Get height
                var playerHeight = kwikMotion('player').height();

                //Set height
                kwikMotion('player').height(newHeightValue);

Parameters

Name	Type	Required	Description
Value	Number	No	Value for new height

width()/width(value)

Returns/Set the player width.


                //Get width
                var playerWidth = kwikMotion('player').width();

                //Set width
                kwikMotion('player').width(newWidthValue);

Parameters

Name	Type	Required	Description
Value	Number	No	Value for new width

dimension(dimension)/dimension(dimension, value)

Get/Set dimension of the player.


                //Get dimension(width)
                var playerWidth = kwikMotion('player').dimension('width');

                //Get dimension(height)
                var playerWidth = kwikMotion('player').dimension('height');

                //Set dimension(width)
                kwikMotion('player').dimension('width', newWidthValue);

                //Set dimension(height)
                kwikMotion('player').dimension('height', newWidthValue);

Parameters

Name	Type	Required	Description
Dimension	String	Yes	width\|height
Value	Number	No	Value of the new dimension (when setting)

load()

Begin loading the src data.


                //Load the src data
                kwikMotion('player').load();

poster()/poster(src)

Get/Set the poster image source url.


                //Get the poster image
                var posterImg = kwikMotion('player').poster();

                //Set the poster image
                kwikMotion('player').poster(sourceOfTheNewPoster);

Parameters

Name	Type	Required	Description
src	String	No	Poster image source URL

Note

In order to see how the Set Poster button works, click it before start playing the video!

preload()/preload(value)

Get/Set the preload attribute value.


                //Get the preload attribute value
                var preloadValue = kwikMotion('player').preload();

                //Set the preload attribute value
                kwikMotion('player').preload(newpreloadValue);

Parameters

Name	Type	Required	Description
value	String	Yes	auto\|metadata\|none

readyState()

Returns a value that expsses the current state of the element with respect to rendering the current playback position, from the codes in the list below.

HAVE_NOTHING (numeric value 0). No information regarding the media resource is available.
HAVE_METADATA (numeric value 1). Enough of the resource has been obtained that the duration of the resource is available.
HAVE_CURRENT_DATA (numeric value 2). Data for the immediate current playback position is available.
HAVE_FUTURE_DATA (numeric value 3). Data for the immediate current playback position is available, as well as enough data for the user agent to advance the current playback position in the direction of playback.
HAVE_ENOUGH_DATA (numeric value 4). The user agent estimates that enough data is available for playback to proceed uninterrupted.


                //Check ready state
                var isReady = kwikMotion('player').readyState();

supportsFullScreen()

Check if the full screen is supported


                var isFullScSupported = kwikMotion('player').supportsFullScreen();

userActive()/userActive(bool)

Get/Set if the user is active


                //Get user active
                var isUserActive = kwikMotion('player').userActive();

                //Set user active
                kwikMotion('player').userActive(newValue);

Parameters

Name	Type	Required	Description
bool	Boolean	Yes	New value when setting

videoWidth()

Get video width


                //Get video width
                var videoWidth = kwikMotion('player').videoWidth();

videoHeight()

Get video height


                //Get video height
                var videoHeight = kwikMotion('player').videoHeight();

tech()

Returns a reference to the current tech.It will only return a reference to the tech if given an object with the IWillNotUseThisInPlugins property on it. This is try and pvent misuse of techs by plugins.


                //Get reference to tech
                var tech = kwikMotion('player').tech();

isFullscreen()

Check if the player is in fullscreen mode.


                //Check full screen mode
                var isFullScreen = kwikMotion('player').isFullscreen();

fluid(bool)

Add/Remove the fluid class.


                //Add fluid class
                kwikMotion('player').fluid(true);

                //Remove fluid class
                kwikMotion('player').fluid(false);

Parameters

Name	Type	Required	Description
bool	Boolean	Yes	True to add fluid, false to remove

addRemoteTextTrack(options)

Add a remote text track.


                //Add remote text track
                kwikMotion('player').addRemoteTextTrack(optionsToAdd);

Parameters

Name	Type	Required	Description
options	Object	Yes	Options for remote text track

addTextTrack(kind, label, language)

Add a text track.

In addition to the W3C settings, we allow adding additional info through options.


                //Add a text track
                kwikMotion('player').addRemoteTextTrack(optionsToAdd);

Parameters

Name	Type	Required	Description
kind	String	Yes	Captions, subtitles, chapters, descriptions, or metadata
label	String	No	Optional label
options	Object	Yes	Optional language

remoteTextTrackEls()

Get an array of remote html track elements.


                //Get track elements
                var trackEls = kwikMotion('player').remoteTextTrackEls();

remoteTextTracks()

Get an array of remote text tracks


                //Get tracks
                var tracks = kwikMotion('player').remoteTextTracks();

removeRemoteTextTrack(track)

Remove a remote text track


                //Remove remote text track
                kwikMotion('player').removeRemoteTextTrack(trackObjectToBeRemoved);

Parameters

Name	Type	Required	Description
track	Object	Yes	Remote text track to remove

textTracks()

Get an array of associated text tracks.


                //Get text tracks
                kwikMotion('player').textTracks();

language(code)

Get the player's language dictionary.


                //Get player language
                var lang = kwikMotion('player').language();

Note

The language should be set in the player options if you want the the controls to be built with a specific language. Changing the lanugage later will not update controls text.

Parameters

Name	Type	Required	Description
code	String	Yes	Language to be used

languages()

Get the player language dictionary.


                //Get languages
                var lang = kwikMotion('player').languages();

scrubbing()/scrubbing(isScrubbing)

Returns whether or not the user is scrubbing. Scrubbing is when the user has clicked the progress bar handle and is dragging it along the progress bar.


                //Scrubbing
                var isScrubbing = kwikMotion('player').scrubbing();

Parameters

Name	Type	Required	Description
isScrubbing	Boolean	Yes	Ture\|False

📞

Contact & Support

White Peaks Solutions SAS

Technical Support: support@whitepeaks.fr
Sales & Licensing: sales@whitepeaks.fr
White Peaks Website: https://www.whitepeaks.fr
KWIKmotion Website: https://www.kwikmotion.com

Overview

Key Features

Setup & Configuration

Setup

Step 1

Step 2: Adding the player to your html code:

Aspect Ratio

Aspect Ratio

Width & Height

Width & Height

Media ID

Mediaid

Image/Poster

Image

Preload

Preload

Controls

Controls

Autostart

Mute

Mute

Debug

Debug

Player Hotkeys

Player Hotkeys

Thumbnails

Thumbnails

Captions

Captions

360° & VR Videos

360/VR Videos

Share Button

Share Button

Resume Playback

Resume

Playlist

Playlist

MP3 Player

MP3 Player

Google Analytics

Google Analytics Integration

Ads

Ads

Chromecast & Airplay

Chromecast and Airplay plugins

Chromecast

Airplay

Ad Blocker Detection

Ad Blocker

Design Studio

KWIKplayer Design Studio

API Functions Reference

Functions

play()

pause()

paused()

ended()

seeking()

seekable()

playbackRate()/playbackRate(value)

Parameters

duration(seconds)

Parameters

currentTime()

Parameters

remainingTime()

loop()/loop(value)

Parameters

buffered()

bufferedEnd()

bufferedPercent()

dispose()

currentType()

error()/error(err)

Parameters

getCache()

src()/src(source)

Parameters

Volume(percentAsDecimal)

Parameters