https://github.com/git-ced/lion-plyr
Open-source React video player powered by Plyr
https://github.com/git-ced/lion-plyr
hacktoberfest plyr react
Last synced: 10 months ago
JSON representation
Open-source React video player powered by Plyr
- Host: GitHub
- URL: https://github.com/git-ced/lion-plyr
- Owner: git-ced
- License: mit
- Created: 2021-07-05T11:43:26.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-02T06:27:03.000Z (almost 4 years ago)
- Last Synced: 2025-03-29T21:41:18.485Z (11 months ago)
- Topics: hacktoberfest, plyr, react
- Language: CSS
- Homepage: https://lion-plyr.netlify.app/
- Size: 1.41 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lion-plyr
> A simple Lion-themed HTML5, YouTube and Vimeo player (Plyr) for ReactJS
[](https://www.npmjs.com/package/lion-plyr)
## 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-plyr
```
Yarn
```bash
$ yarn add lion-plyr
```
## Setup
Start using it by importing the library first.
### CommonJS
```javascript
const LionPlyr = require('lion-plyr');
```
or
### ES6
```javascript
import { LionPlyr } from 'lion-plyr';
```
The `LionPlyr` component requires the following CSS for styling:
**Using link tags**
```html
```
**Using import**
```javascript
import 'lion-plyr/dist/lion-skin.min.css';
```
## Usage
**Video playback using Solid Plyr Player**
```javascript
import { LionPlyr } from 'lion-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
type: 'video/mp4',
size: 720,
},
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
type: 'video/mp4',
size: 1080,
}
]
}
const OPTIONS = {
autoplay: true,
muted: true,
}
export default function Player() {
return (
);
}
```
**Uncontrolled Solid Plyr Player**
```javascript
import { UncontrolledLionPlyr, usePlyr } from 'lion-plyr';
import { useEffect } from 'react';
const SOURCE = {
// ...
}
const OPTIONS = {
// ...
}
export default function Player() {
const [ref, setRef] = usePlyr({
source: SOURCE,
options: OPTIONS,
});
useEffect(() => {
const player = ref()?.plyr;
if (player) {
player.on('timeupdate', event => {
// Log current time while playing the playback
console.log(event.detail.plyr.currentTime);
});
}
})
return (
);
}
```
**Play YouTube Videos using Solid Plyr**
```javascript
import { LionPlyr } from 'lion-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src: 'yWtFb9LJs3o',
provider: 'youtube'
}
]
}
const OPTIONS = {
// ...
}
export default function Player() {
return (
);
}
```
**Play Vimeo Videos using Solid Plyr**
```javascript
import { LionPlyr } from 'lion-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src: 'https://vimeo.com/533559247',
provider: 'vimeo'
}
]
}
const OPTIONS = {
// ...
}
export default function Player() {
return (
);
}
```
**Video Playback with HLS using Solid Plyr**
```javascript
import { SolidHlsPlyr } from 'lion-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src:
'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8',
type: 'application/x-mpegURL'
}
]
}
const OPTIONS = {
// ...
}
export default function Player() {
return (
);
}
```
**Uncontrolled Video Playback with HLS using Solid Plyr**
```javascript
import { UncontrolledLionPlyr, useHlsPlyr } from 'lion-plyr';
import { useEffect } from 'react';
const SOURCE = {
// ...
}
const OPTIONS = {
// ...
}
export default function Player() {
const [ref, setRef] = useHlsPlyr({
source: SOURCE,
options: OPTIONS,
});
useEffect(() => {
const player = ref()?.plyr;
if (player) {
player.on('timeupdate', event => {
// Log current time while playing the playback
console.log(event.detail.plyr.currentTime);
});
}
})
return (
);
}
```
**Video Playback with Dash using Solid Plyr**
```javascript
import { SolidDashPlyr } from 'lion-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
type: 'application/dash+xml',
}
]
}
const OPTIONS = {
// ...
}
export default function Player() {
return (
);
}
```
**Uncontrolled Video Playback with Dash using Solid Plyr**
```javascript
import { UncontrolledLionPlyr, useDashPlyr } from 'lion-plyr';
import { useEffect } from 'react';
const SOURCE = {
// ...
}
const OPTIONS = {
// ...
}
export default function Player() {
const [ref, setRef] = useDashPlyr({
source: SOURCE,
options: OPTIONS,
});
useEffect(() => {
const player = ref()?.plyr;
if (player) {
player.on('timeupdate', event => {
// Log current time while playing the playback
console.log(event.detail.plyr.currentTime);
});
}
})
return (
);
}
```
## Authors
- [Prince Neil Cedrick Castro](https://github.com/git-ced/) - Initial work
See also the list of [contributors](https://github.com/git-ced/lion-plyr/contributors) who participated in this project.
## Changelog
[Changelog](https://github.com/git-ced/lion-plyr/releases)
## License
[MIT](LICENSE)