@afiniti/video-player

React component for Afiniti's Video Learning Environment

Usage no npm install needed!

<script type="module">
  import afinitiVideoPlayer from 'https://cdn.skypack.dev/@afiniti/video-player';
</script>

README

@afiniti/video-player

Description

React video player module built for vimeo and graph cms bases videos.

Note

This is a work in progress, not ready for production yet. Your feedback would be appreciated, custom features can also be requested. Only meant for within organization private usage.

Installation

npm i @afiniti/video-player

Features

  • Chapters
  • Bookmarks
  • Play/pause/mute full control over the player

Props

Name Type Description
data object video sources in specified format.
poster string graphcms full url.
apiUrl string graphcms api url.
autoplay bool Autoplay slider or not. Defaults to true
playerApi method Returns reference to player
closeCallback method Action to perform on video close button

Example Usage

The package can be integrated inside a react component as follows:

import React from 'react';
import VideoPlayer from '@afiniti/video-player';

const myVideoPlayer = ({ autoplay }) => {
  return (
    <VideoPlayer
      apiUrl="https://api-euwest.graphcms.com/v1/sdkasndkasndknas/master"
      slug="welcome-home"
      closeCallback={() => {
        setShowVideo(false);
      }}
      autoplay={autoplay}
    />
  );
};

export default myVideoPlayer;