https://github.com/git-ced/lion-player
Lion Player - open-source React video player powered by VideoJS
https://github.com/git-ced/lion-player
hacktoberfest lion-player react videojs
Last synced: 10 months ago
JSON representation
Lion Player - open-source React video player powered by VideoJS
- Host: GitHub
- URL: https://github.com/git-ced/lion-player
- Owner: git-ced
- License: mit
- Created: 2021-03-17T18:44:55.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-30T15:41:59.000Z (over 4 years ago)
- Last Synced: 2025-04-17T19:17:37.174Z (10 months ago)
- Topics: hacktoberfest, lion-player, react, videojs
- Language: CSS
- Homepage: https://lion-player.netlify.app/
- Size: 1.48 MB
- Stars: 21
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lion-player
> Open-source React video player powered by VideoJS
[](https://www.npmjs.com/package/lion-player)
## Table of Contents
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Authors](#authors)
- [Changelog](#changelog)
- [License](#license)
## Installation
This library is available through the [npm registry](https://www.npmjs.com/).
NPM
```bash
$ npm -i lion-player
```
Yarn
```bash
$ yarn add lion-player
```
## Setup
Start using it by importing the library first.
### CommonJS
```javascript
const LionPlayer = require('lion-player');
```
or
### ES6
```javascript
import { LionPlayer } from 'lion-player';
```
The `LionPlayer` component requires the following CSS for styling:
**Using link tags**
```html
```
**Using import**
```javascript
import 'lion-player/dist/lion-skin.min.css';
```
## Usage
**Video playback through Lion Player**
```javascript
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 (
);
}
```
**Uncontrolled Lion Player**
```javascript
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 (
);
}
```
**List of possible props for `LionPlayer`**
[LionPlayer Props Reference](https://docs.videojs.com/tutorial-options.html)
```typescript
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;
poster?: string;
preload?: string;
sourceOrder?: boolean;
sources?: videojs.Tech.SourceObject[];
src?: string;
techOrder?: string[];
tracks?: videojs.TextTrackOptions[];
userActions?: videojs.UserActions;
width?: number;
}
```
## Authors
- [Prince Neil Cedrick Castro](https://github.com/git-ced/) - Initial work
See also the list of [contributors](https://github.com/git-ced/lion-player/contributors) who participated in this project.
## Changelog
[Changelog](https://github.com/git-ced/lion-player/releases)
## License
[MIT](LICENSE)