0.1.2 • Published 2 years ago
@afiniti/video-player-lite v0.1.2
@afiniti/video-player-lite
Description
Lightweight React video player module built for vimeo, this is a wrapper on plyr.io with added funtionality.
Installation
npm i @afiniti/video-player-lite
Features
- Floating Player
- Fullscreen video
- Video Modal
- Poster
- Related Videos
- Play/pause/mute full control over the player
Props
| Name | Type | Description |
|---|---|---|
poster | string | poster url given in a string |
vimeoId | string | vimeo video id |
videoSlug | string | video slug |
videoTitle | string | title to display on video |
isFloating | bool | Show floating video on scroll or not. Defaults to true |
playFullScreen | bool | Play video full screen or not. Defaults to false |
openInModal | bool | Play video in a modal append in root. Defaults to false |
playCallback | method | Action to perform on video play button |
closeCallback | method | Action to perform on video close button |
openRelatedVideos | bool | Show related videos or not. Defaults to false |
apiUrl | string | Api url from where to fetch the related videos |
Example Usage
The package can be integrated inside a react component as follows:
install plyr 3.6.8 in your project
import React from 'react';
// @dependencies
import PlayerComponent from 'js/VideoPlayerLite';
// @import styles
import styles from './index.module.scss';
const Home = () => {
return (
<div className={styles.homeContainer}>
<PlayerComponent
vimeoId="546196101"
isFloating={false}
openInModal={true}
playFullScreen={false}
openRelatedVideos={true}
videoSlug="anthony-tuggle-testimonial"
videoTitle="THE NUANCE OF AFINITI'S TECHNOLOGY"
poster="http://media.graphcms.com/m2Mm6haVT3iKaT2VUZJQ"
apiUrl="https://api-us-east-1.graphcms.com/v2/ckui8cam7108201xpc9tg32du/master"
/>
</div>
);
};
export default Home;add cdn link in server.js or index.html
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />