Setup#

Using KWIKplayer with Vanilla JavaScript#

Follow these steps to set up KWIKplayer in a plain JavaScript environment:

1. Add the KWIKplayer Script to Your Project Include the KWIKplayer library by appending the following script tag to your HTML file or dynamically adding it via JavaScript.

  <script src="https://player.kwikmotion.com/ClientsTemplates/EXAMPLE/KwikLink_EXAMPLE_EXAMPLE_v9.js"></script>

*or use your specific license file link.

2. Add Your Script to the Project Make sure to put that your script will be run after KWIKplayer extenral script

  <script src="./index.js"></script>

3. Create a Video Player Element Add an HTML container for the player. The id will be used to initialize the player.

  <div id="kwik-player" class="kwik-player"></div>

4. Initialize the Player Use the following script to initialize the player. Replace the options with your desired configuration:
   

    if (!window.initPlayer) {
      console.error('KWIKplayer script not loaded');
    }

    const options = {
      bigPlayButton: true,
      src: 'https://vjs.zencdn.net/v/oceans.mp4',
    };

    window.initPlayer('kwik-player', options);

To get the player instance, call initPlayer with a 3rd argument, which accepts a callback that will be executed when the player is ready:

  window.initPlayer('kwik-player', options, () => {
      const player = window.kwikMotion('kwik-player');
  });

5. Add event listeners as needed:

  ({
    player.on('loadeddata', () => console.log('Video Loaded'));
    player.on('play', () => console.log('Playing'));
    player.on('pause', () => console.log('Paused'));
  });

Using KWIKplayer with TypeScript#

1. Add the KWIKplayer script and your enter script from dist.
2. Download and add in your project KWIKplayer types from: https://playerv9.kwikmotion.com/types/KwikLink.d.ts
3. Import KwikMotion into your script

  import {KwikMotion} from './types/KwikLink'

4. Define options and initialize the player like in js example using TypeScript types:

  const options: KwikMotion.Options = {
    bigPlayButton: true,
    controlBar: {
      skipButtons: {
        forward: 30,
        backward: 30,
      },
    },
    titleBar: {
      title: 'Kwik',
      description: 'Kwik',
    },
    src: 'https://vjs.zencdn.net/v/oceans.mp4',
  };

  if (window.initPlayer) {
    const player: KwikMotion.Player | undefined  = window.initPlayer('kwik-player', options);
    player?.one('loadeddata' as KwikMotion.Event, (event) => console.log(event));

    player?.on(['pause', 'play'] as KwikMotion.Event[], () => console.log('Video Loaded'));
  }