rn-player

A cross-platform video player with customizable controls for React Native.

Installation

yarn add @randomdotcom/rn-player or npm i --save @randomdotcom/rn-player

If you use the bare React Native, you should install the react-native-unimodules library. (BUT compatibility with bare react native has not yet been tested)

Usage

The <Video /> component that library provides is wrapper around expo-av video component.

Basic usage (without fullscreen ability):

1<Video
2  defaultSource={props.video.defaultSource}
3  showControlsOnLoad
4  shouldPlay
5 />

Fullscreen example:

1  import React, { useEffect, useState } from 'react';
2  import { View, ActivityIndicator, Dimensions, TouchableOpacity } from 'react-native';
3  import { ScreenOrientation } from 'expo'; // You can replace this library by an alternative one
4  import Video from '@randomdotcom/rn-player';
5  
6  const HomeScreen = props => {
7  const [inFullscreen, setInFullscreen] = useState(false);
8  const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);
9
10  useEffect(() => {
11    props.getVideo(videoId);
12    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.ALL_BUT_UPSIDE_DOWN);
13
14    const orientationListener = event => {
15      setScreenWidth(Dimensions.get('window').width);
16      if (event.orientationInfo.orientation === 'LANDSCAPE') setInFullscreen(true);
17      else setInFullscreen(false);
18    };
19
20    let subscription = ScreenOrientation.addOrientationChangeListener(orientationListener);
21
22    return () => {
23      ScreenOrientation.removeOrientationChangeListener(subscription);
24    };
25  }, []);
26
27  const fullscreenOn = async () => {
28    setInFullscreen(true);
29    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.LANDSCAPE_RIGHT).then(() => {
30      setScreenWidth(Dimensions.get('window').width);
31      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.ALL_BUT_UPSIDE_DOWN);
32    });
33  };
34
35  const fullscreenOff = async () => {
36    setInFullscreen(false);
37    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT_UP).then(() => {
38      setScreenWidth(Dimensions.get('window').width);
39      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.ALL_BUT_UPSIDE_DOWN);
40    });
41  };
42
43  return props.video ? (
44    <View style={{ height: '100%', backgroundColor: '#000' }}>
45      <Video
46        defaultSource={props.video.defaultSource}
47        sources={props.video.sources}
48        preview={props.video.preview}
49        id={props.video.id}
50        title={props.video.title}
51        showControlsOnLoad
52        width={screenWidth}
53        inFullscreen={inFullscreen}
54        onFullscreenOn={fullscreenOn}
55        onFullscreenOff={fullscreenOff}
56        shouldPlay
57      />
58    </View>
59  ) : (
60    <ActivityIndicator />
61  );
62};

video props from example

1  {
2  defaultSource: "https://59vod-adaptive.akamaized.net/exp=1580153415~acl=%2F226958858%2F%2A~hmac=1a1b393af9ce48f4a67447ac82f8090302bfd88f83d8db3d35a0de27229beb52/226958858/video/1309466738,798109508,798109507,798109503,798109502,798109500,798109498/master.m3u8",
3  id: 226958858,
4  preview: "https://i.vimeocdn.com/video/824127146_1280.jpg",
5  sources: [
6    {
7      cdn: "akamai_interconnect",
8      fps: 29,
9      height: 1080,
10      id: 798109503,
11      mime: "video/mp4",
12      origin: "gcs",
13      profile: 175,
14      quality: "1080p",
15      url: "https://vod-progressive.akamaized.net/exp=1580153415~acl=%2A%2F798109503.mp4%2A~hmac=32ef482a50babdb19aad1493c10b2a14226859155eb8fddca8a44d5ab68922ed/vimeo-prod-skyfire-std-us/01/391/9/226958858/798109503.mp4",
16      width: 1920,
17    },
18    {
19      cdn: "akamai_interconnect",
20      fps: 29,
21      height: 720,
22      id: 798109498,
23      mime: "video/mp4",
24      origin: "gcs",
25      profile: 174,
26      quality: "720p",
27      url: "https://vod-progressive.akamaized.net/exp=1580153415~acl=%2A%2F798109498.mp4%2A~hmac=41ac793c71bb5ef15c4a2786d2e1fc8e3a09de8257a6b09ec6736fe48273d438/vimeo-prod-skyfire-std-us/01/391/9/226958858/798109498.mp4",
28      width: 1280,
29    },
30  ],
31  title: "Pursuit (4K)",
32  url: "https://vimeo.com/226958858",
33}

Props

prop	type	description
title	String	A title of the video on the top left
preview	Image source	A poster of the video, 'http://path/to/image'
defaultSource*	Video source	Default source of the video, 'http://path/to/video'
sources	Array<{quality, url}: {String, String}>	Additional sources of the video, [{quality: "1080p", url: 'http://path/to/video'}, {quality: "720p", uri: 'http://path/to/video'}]
width*	Number	Width of the video, pass Dimensions.get('window').width
height	Number	Default calculating from video width: width * 0.563
inFullscreen	Boolean	Is video in fullscreen? Needs to support fullscreen mode
onFullscreenOn	Function	Function that changes inFullscreen prop
onFullscreenOff	Function	Function that changes inFullscreen prop
topControlsAdditionalComponent	Component	Additional component on the top right
bottomControlsAdditionalComponent	Component	Additional component on the bottom right
minimizeIcon	Component	Custom icon
maximizeIcon	Component	Custom icon
pauseIcon	Component	Custom icon
playIcon	Component	Custom icon
replayIcon	Component	Custom icon
settingsIcon	Component	Custom icon
acitivityIndicator	Component	Custom activity indicator
sliderProps	SliderProps
sliderStyles	StyleObj
durationTextStyles	StyleObj
positionTextStyles	StyleObj
titleStyles	StyleObj

Inherits VideoProps