Skip to main content

ReactJS wrapper

Introduction​

This project provides a ReactJS wrapper for Ober Player, making it easier to integrate and control the video player within React applications. The wrapper aims to offer a simple interface to embed videos, control playback, and interact with the video player's API in a React-friendly way.

Features​

  • Easy integration with React applications
  • Events and callbacks for player interactions

Getting Started​

Prerequisites​

Installation​

  1. Install the package using npm:
npm install @oberplayer/wrapper-react

Or using yarn:

yarn add @oberplayer/wrapper-react

Usage​

Here's a simple example to get you started:

import { PlayerWrapper } from '@oberplayer/wrapper-react'
const playerOptions = {
  playlist: [
      {
        videoUrl: 'https://cdn.oberplayer.com/fixtures/mp4/bbb_27s_4k.mp4'
      }
    ]
}
<PlayerWrapper
  options={playerOptions}
  onReady={(playerInstance) => {
    // You can now listen whatever event you want
    playerInstance.on(playerInstance.eventsList.SETUP , () => {
      console.log('Ober Player has been setup');
    });
    playerInstance.on(playerInstance.eventsList.LOAD , () => {
      console.log('Video has been loaded');
    });
    playerInstance.on(playerInstance.eventsList.PLAY , () => {
      // or call whatever function you want
      playerInstance.pause();
    });
  }}
/>

Get full reference of "playerInstance" object here :