README

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

Usage no npm install needed!