player

Open-source React video player powered by VideoJS

Mar 27, 2021

lion-player

Open-source React video player powered by VideoJS.

View Demo View Github

Installation

This library is available through the npm registry.

NPM

$ npm -i lion-player

Yarn

$ yarn add lion-player

Setup

Start using it by importing the library first.

CommonJS

const LionPlayer = require('lion-player');

or

ES6

import { LionPlayer } from 'lion-player';

The LionPlayer component requires the following CSS for styling:

Using link tags

<link href="https://unpkg.com/[email protected]/dist/lion-skin.min.css" rel="stylesheet">

Using import

import 'lion-player/dist/lion-skin.min.css';

Usage

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" />
  );
}

List of possible props for LionPlayer

LionPlayer Props Reference

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;
}