Kwik-Player-React

Kwik-Player-React is very easy to setup and handle.

please refer to KWIKPlayer for the full documentation about the props and methods

Installation and usage

npm install kwik-player-react

Then use it in your app:

import { useEffect, useRef, useState } from 'react';
import './App.css';
import KwikPlayer from 'kwik-player-react';

function App() {
    const playerRef = useRef();
    const [isReady, setIsReady] = useState(false);

    useEffect(() => {
        console.log(playerRef.current?.bufferedPercent());
    }, [isReady]);

    return (
        <div className="App">
            <KwikPlayer
                onReady={setIsReady}
                id="kwik"
                ref={playerRef}
                kwikPlayerSrc="https://player.kwikmotion.com/ClientsTemplates/your/KwikLink_209_Qmbv2D352J.js"
                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',
                    },
                ]}
            />
        </div>
    );
}

export default App;

you can use kwikPlayerSrc prop instead of including KWIKPyoulayer script in your html

Usage with Typescript: You'll only need to import functionsTypes and assign it to useRef (e.g. playerRef = useRef< functionsType >()) so you get all the benifits of typescript when accessing playerRef.current

import {functionsType} from 'kwik-player-react/dist/types'

if you want to create an object holding the props assign it to IKwikPlayer

import {IKwikPlayer} from 'kwik-player-react/dist/types'

Methods

when the player is ready all KWIKPlayer functions will be available through the ref passed

Customisation

the player is wrapped with a container wich takes classname from containerClassname prop