@api.video/react-native-player NPM

npm.io npm

api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.

Project description

React Native video player to play vod and lives from api.video

Getting started

Installation

npm install @api.video/react-native-player

yarn add @api.video/react-native-player

Note: if you are on iOS, you will need this extra step: Install the native dependencies with Cocoapods

cd ios && pod install

Limitations

For the moment, this player component is based on the api.video's javascript player (displayed in a react-native-webview), and therefore it suffers from the same limitation as every players displayed in browsers.

We plan to base the player component on natives video players in a further release to avoid this kind of limitation. Stay tuned!

Code sample

import React from 'react';
import ApiVideoPlayer from '@api.video/react-native-player';

const App = () => 
    <ApiVideoPlayer videoId="vi2G6Qr8ZVE67dWLNymk7qbc" />
  
export default App;

Documentation

Props & Methods

// props:
type PlayerProps = {
    // the id of the video (required)
    videoId: string;
    // if the video is private, the private token of the video
    privateToken?: string;
    // if the video is private, the session token for the video (avh)
    sessionToken?: string;
    // whether the video is vod or live (default is 'vod')
    type?: 'vod' | 'live';
    // the controls are hidden (default false)
    hideControls?: boolean;
    // the video title is hidden (default false)
    hideTitle?: boolean;
    // start playing the video as soon as it is loaded (default false)
    autoplay?: boolean;
    // once the video is finished it automatically starts again (default false)
    loop?: boolean;
    // the video is muted (default false)
    muted?: boolean;
    // style to apply to the player component
    style?: StyleProp<ViewStyle>;

    onControlsDisabled?: () => void;
    onControlsEnabled?: () => void;
    onEnded?: () => void;
    onError?: () => void;
    onFirstPlay?: () => void;
    onFullScreenChange?: () => void;
    onPause?: () => void;
    onPlay?: () => void;
    onPlayerResize?: () => void;
    onQualityChange?: (resolution: { height: number, width: number }) => void;
    onRateChange?: () => void;
    onReady?: () => void;
    onResize?: () => void;
    onSeeking?: () => void;
    onTimeUpdate?: ( currentTime: number ) => void;	
    onUserActive?: () => void;
    onUserInactive?: () => void;
    onVolumeChange?: ( volume: number ) => void;
}

// methods:
play(): void;
pause(): void;
requestFullscreen(): void;
seek(time: number): void;
setCurrentTime(time: number): void;
setPlaybackRate(rate: number): void;
setVolume(volume: number): void;

Using methods

import React, { Component } from 'react';
import ApiVideoPlayer from '@api.video/react-native-player';
import { Button, View } from 'react-native';

export default class App extends Component {

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ApiVideoPlayer
          ref={(r) => (this.player = r)}
          muted={true}
          videoId="vi2G6Qr8ZVE67dWLNymk7qbc" />

        <Button onPress={() => this.player.play()} title="Play" />
        <Button onPress={() => this.player.pause()} title="Pause" />

      </View>
    )
  }
}