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",
},
});
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.
For bare React Native projects, you must ensure that you have installed and configured the expo
package before continuing.
npm install rn-brightcove-player
Run npx pod-install
after installing the npm package.
Contributions are very welcome! Please refer to guidelines described in the contributing guide.