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