Open-source React Video Player – lion-player


lion-player is an open-source React video player powered by VideoJS.

How to use it:

1. Install and import.

# Yarn
$ yarn add lion-player
$ npm i lion-player
import { LionPlayer } from 'lion-player';
import 'lion-player/dist/lion-skin.min.css';

2. Define the path to your videos.

const SOURCES = [
    src: '1.m3u8',
    type: 'application/x-mpegURL',
    src: 'h2.mpd',
    type: 'application/dash+xml',
  // ...

3. Create a video player on your app.

export default function Player() {
  return (
    <LionPlayer sources={SOURCES} autoplay="muted" />

4. All possible component props.

aspectRatio?: string;
autoplay?: boolean | string;
bigPlayButton?: boolean;
controlBar?: videojs.ControlBarOptions | false;
textTrackSettings?: videojs.TextTrackSettingsOptions;
controls?: boolean;
defaultVolume?: number;
fluid?: boolean;
height?: number;
html5?: any;
inactivityTimeout?: number;
language?: string;
languages?: { [code: string]: videojs.LanguageTranslations };
liveui?: boolean;
loop?: boolean;
muted?: boolean;
nativeControlsForTouch?: boolean;
notSupportedMessage?: string;
playbackRates?: number[];
plugins?: Partial<VideoJsPlayerPluginOptions>;
poster?: string;
preload?: string;
sourceOrder?: boolean;
sources?: videojs.Tech.SourceObject[];
src?: string;
techOrder?: string[];
tracks?: videojs.TextTrackOptions[];
userActions?: videojs.UserActions;
width?: number;


Open-source React Video Player - lion-player

Add Comment