@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
• 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

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="546466644"
        isFloating={true}
        poster="http://media.graphcms.com/m2Mm6haVT3iKaT2VUZJQ"
        playFullScreen={false}
        videoTitle="The History of AI"
      />
    </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" />