Newly Potted Mandrakes
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    badge   badge   badge npm ts React Native video player 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

    Getting started


    npm install


    yarn add

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

    cd ios && pod install


    For the moment, this player component is based on the'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 '';
    const App = () => 
        <ApiVideoPlayer videoId="vi2G6Qr8ZVE67dWLNymk7qbc" />
    export default App;


    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 '';
    import { Button, View } from 'react-native';
    export default class App extends Component {
      render() {
        return (
          <View style={{ flex: 1 }}>
              ref={(r) => (this.player = r)}
              videoId="vi2G6Qr8ZVE67dWLNymk7qbc" />
            <Button onPress={() =>} title="Play" />
            <Button onPress={() => this.player.pause()} title="Pause" />


    If you have any questions, ask us here: . Or use Issues.


    npm i

    DownloadsWeekly Downloads






    Unpacked Size

    75 kB

    Total Files


    Last publish


    • apivideo-ecosystem
    • anthony.dantard
    • olivierapivideo