1.0.47 • Published 12 months ago

@gl-solution/video-player v1.0.47

Weekly downloads
-
License
ISC
Repository
-
Last release
12 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

12 months ago

1.0.46

1 year ago

1.0.45

1 year ago

1.0.44

1 year ago

1.0.43

1 year ago

1.0.42

1 year ago

1.0.41

1 year ago

1.0.40

1 year ago

1.0.39

1 year ago

1.0.38

1 year ago

1.0.37

1 year ago

1.0.36

1 year ago

1.0.35

1 year ago

1.0.34

1 year ago

1.0.33

1 year ago

1.0.32

1 year ago

1.0.31

1 year 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