Newly Potted Mandrakes

    @api.video/react-native-player
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    badge   badge   badge npm ts

    api.video React Native video player

    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.

    Table of contents

    Project description

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

    Getting started

    Installation

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

    or

    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;
        // 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>
        )
      }
    }

    FAQ

    If you have any questions, ask us here: https://community.api.video . Or use Issues.

    Install

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

    DownloadsWeekly Downloads

    9

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    75 kB

    Total Files

    12

    Last publish

    Collaborators

    • apivideo-ecosystem
    • anthony.dantard
    • olivierapivideo