
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 $ 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;
Preview:
Download Details:
Author: git-ced
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/git-ced/lion-player
License: MIT
Credit: Source link