GL Solution VideoPlayer

Description

A VideoPlayer library for React and React Native which allows using the Player Component.

Installation

To install the library, use npm:

npm install @gl-solution/video-player

Prerequirements

WEB

If you are using library in NextJS project, please add webpack changes to the and of nextConfig variable in your next.config.js file

const webpack = require("webpack");

const nextConfig = {
  webpack: (config) => {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(/videoRN/, (resource) => {
        resource.request = "data:text/javascript,export default {}";
      })
    );
    return config;
  },
};
module.exports = nextConfig;

TVOS

If you are using library in ReactNative project for tvOS, please add next line to your Podfile and reinstall pods

pod 'react-native-video', :path => '../node_modules/react-native-video'

AndroidTV/FireTV

If you are using library in ReactNative project for AndroidTV or FireTV, please do next steps:

1. Open android/app/build.gradle file and add next line to dependencies

implementation project(':react-native-video')

2. Open MainApplication file. Add next import and add ReactVideoPackage to getPackages method

import com.brentvatne.react.ReactVideoPackage

...
add(ReactVideoPackage())
...

3. Open android/settings.gradle file and add next lines

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

Usage

Example of how to install VideoJS (https://videojs.com) in React and NextJS:

import { PlayerConstructor, IPlayerTypes } from "@gl-solution/video-player";

const VideoPlayer = () => {
  const Player = PlayerConstructor.init(IPlayerTypes.WEB);
  return (
    <div>
      // https://videojs.com/guides/options/
      <Player options={options} />
    </div>
  );
};

export default VideoPlayer;

Example of how to use library in React Native:

import { PlayerConstructor, IPlayerTypes } from "@gl-solution/video-player";

export default function ReactPlayer() {
  const Player = PlayerConstructor.init(IPlayerTypes.PHONE);
  return <Player />;
}

Adding Event Listeners

Example of how to add eventsListeners:

const eventsListeners = [
  {
    eventName: "play",
    callback: () => console.log("play event"),
  },
  {
    eventName: "pause",
    callback: () => console.log("pause event"),
  },
];
return <Player options={options} eventsListeners={eventsListeners} />;

Automatic Episode Playback

Example of setting up a list of episodes with automatic playback:

You should pass episodesPlaybackData properties to the Player component.

• episodesList: Array with episode data (src for video and type of video).
• isAutoPlayNext: Enables autoplay for the next episode (default is false).
• episodeInd: Index of the episode from which to start playing (default is 0).

interface episodesPlaybackData {
  episodesList: {
    src: string;
    type: string;
  }[];
  isAutoPlayNext: boolean;
  episodeInd?: number;
}

const episodesPlaybackData = {
  isAutoPlayNext: true,
  episodesList: [
    {
      src: "src for video",
      type: "video type (e.g., application/x-mpegURL)",
    },
    {
      src: "src for video",
      type: "video type (e.g., application/x-mpegURL)",
    },
  ],
};

return <Player options={options} episodesPlaybackData={episodesPlaybackData} />;

Player Methods:

play() - Attempt to begin playback at the first opportunity.

GLPlayer.play();

pause() - Pause the video playback

GLPlayer.pause();