rn-brightcove-player

Currently everything works on iOS. Android is very difficult for me to work on. Android can play videos, but 360 videos do not work, this is most likely a bug with the brightcove SDK. Android does not allow the track color to be customized either. Currently seekTo does not work on Android because the event is not documented from Brightcove. I wish brightcove had documentation of their API, they don't. But I must say they seem to be the only cross-platform 360 video player for android and ios, so kudos to them for that.

API Example:

Static Functions

import { seekTo, play, pause, presentFullscreenPlayer } from "rn-brightcove-player";

seekTo(18);
play();
pause();
presentFullscreenPlayer();

Props

type OnDidProgressToType = {
  nativeEvent: { progress: number };
};

type RNBrightcovePlayerViewProps = {
  url: string;
  isVR?: boolean; // Default false
  trackColor?: string; // Default #cccccc
  projection?: string; // Default equirectangular
  seekEnabled?: boolean; // Not working
  onDidCompletePlaylist?(): void;
  onDidProgressTo?(e: OnDidProgressToType): void;
} & ViewProps;

import { useCallback, useEffect, useRef } from "react";
import { StyleSheet, View } from "react-native";
import {
  OnDidProgressToType,
  BrightcovePlayer,
  seekTo,
  play,
  pause,
} from "rn-brightcove-player";

const isVR = false;
const appColor = "#69499e";
const url = "https://www.w3schools.com/HTML/mov_bbb.mp4";

export default function App() {
  const playerRef = useRef<BrightcovePlayer>(null);

  const onDidCompletePlaylist = useCallback(() => {
    console.warn("Did complete playlist");
  }, []);

  const onDidProgressTo = useCallback(
    ({ nativeEvent: { progress } }: OnDidProgressToType) => {
      // console.warn(`Did progress to ${progress}`);
    },
    []
  );

  useEffect(() => {
    setTimeout(() => {
      seekTo(18);
    }, 5000);

    setTimeout(() => {
      pause();
    }, 7000);

    setTimeout(() => {
      play();
    }, 9000);
  }, []);

  return (
    <View style={styles.container}>
      <BrightcovePlayer
        ref={playerRef}
        style={styles.player}
        isVR={isVR}
        seekEnabled={false}
        trackColor={appColor}
        url={url}
        onDidCompletePlaylist={onDidCompletePlaylist}
        onDidProgressTo={onDidProgressTo}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  player: {
    ...StyleSheet.absoluteFillObject,
  },
  container: {
    flex: 1,
    backgroundColor: "#aaa",
    alignItems: "center",
    justifyContent: "center",
  },
});

API documentation

• Documentation for the main branch
• Documentation for the latest stable release

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npm install rn-brightcove-player

Configure for iOS

Run npx pod-install after installing the npm package.

Configure for Android

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.