1.0.47 • Published 11 months ago

@gl-solution/video-player v1.0.47

Weekly downloads
-
License
ISC
Repository
-
Last release
11 months ago

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')
  1. Open MainApplication file. Add next import and add ReactVideoPackage to getPackages method
import com.brentvatne.react.ReactVideoPackage

...
add(ReactVideoPackage())
...
  1. 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();
1.0.47

11 months ago

1.0.46

12 months ago

1.0.45

12 months ago

1.0.44

12 months ago

1.0.43

12 months ago

1.0.42

12 months ago

1.0.41

12 months ago

1.0.40

12 months ago

1.0.39

12 months ago

1.0.38

12 months ago

1.0.37

12 months ago

1.0.36

12 months ago

1.0.35

12 months ago

1.0.34

12 months ago

1.0.33

12 months ago

1.0.32

12 months ago

1.0.31

12 months ago

1.0.30

1 year ago

1.0.29

1 year ago

1.0.28

1 year ago

1.0.27

1 year ago

1.0.26

1 year ago

1.0.25

1 year ago

1.0.24

1 year ago

1.0.23

1 year ago

1.0.22

1 year ago

1.0.2105

1 year ago

1.0.2104

1 year ago

1.0.2103

1 year ago

1.0.2102

1 year ago

1.0.2101

1 year ago

1.0.2100

1 year ago

1.0.2099

1 year ago

1.0.2098

1 year ago

1.0.2093

1 year ago

1.0.2092

1 year ago

1.0.2091

1 year ago

1.0.2090

1 year ago

1.0.209

1 year ago

1.0.208

1 year ago

1.0.207

1 year ago

1.0.206

1 year ago

1.0.205

1 year ago

1.0.204

1 year ago

1.0.203

1 year ago

1.0.202

1 year ago

1.0.201

1 year ago

1.0.20

1 year ago

1.0.19

1 year ago

1.0.18

1 year ago

1.0.172

1 year ago

1.0.171

1 year ago

1.0.170

1 year ago

1.0.169

1 year ago

1.0.168

1 year ago

1.0.167

1 year ago

1.0.166

1 year ago

1.0.165

1 year ago

1.0.164

1 year ago

1.0.163

1 year ago

1.0.162

1 year ago

1.0.161

1 year ago

1.0.16

1 year ago

1.0.15

1 year ago

1.0.14

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.11

1 year ago

1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago