@afiniti/video-player-lite

@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" />