Open-source React video player powered by VideoJS
NPM npm bundle size (scoped) npm bundle size (scoped version) Libraries.io dependency status for latest release, scoped npm package NPM
This library is available through the npm registry.
NPM
$ npm -i lion-player
Yarn
$ yarn add lion-player
Start using it by importing the library first.
const LionPlayer = require('lion-player');
or
import { LionPlayer } from 'lion-player';
The LionPlayer component requires the following CSS for styling:
Using link tags
<link href="https://unpkg.com/lion-player@1.1.5/dist/lion-skin.min.css" rel="stylesheet">
Using import
import 'lion-player/dist/lion-skin.min.css';
Video playback through Lion Player
import { LionPlayer } from 'lion-player'; const SOURCES = [ { src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8', type: 'application/x-mpegURL', }, { src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd', type: 'application/dash+xml', } ]; export default function Player() { return ( <LionPlayer sources={SOURCES} autoplay="muted" /> ); }
Uncontrolled Lion Player
import { UncontrolledLionPlayer, usePlayer } from 'lion-player'; const SOURCES = [ { src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8', type: 'application/x-mpegURL', }, { src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd', type: 'application/dash+xml', } ]; export default function Player() { const { ref } = usePlayer({ sources: SOURCES, muted: true, }); return ( <UncontrolledLionPlayer playerRef={SOURCES} /> ); }
List of possible props for LionPlayer
interface 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; }
- Prince Neil Cedrick Castro - Initial work
See also the list of contributors who participated in this project.