kwik-player-react v1.2.0
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
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago