lion-player
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

lion-player

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

Table of Contents

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/lion-player@1.1.5/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" />
  );
}

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

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

Authors

See also the list of contributors who participated in this project.

Changelog

Changelog

License

MIT

Package Sidebar

Install

npm i lion-player

Weekly Downloads

111

Version

1.2.3

License

MIT

Unpacked Size

161 kB

Total Files

41

Last publish

Collaborators

  • princedev