Setup

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>