This library provides a fully customisable YouTube video player that works on Android and iOS. It also comes with a common use-case documentation of things that you would like to implement.
By default, there are two controls slots that are displayed respectively on different parts of the parent container, and you can use default components provided by this library:
This is simple as that.
VideoPlayer ship around any video component but fits well with react-video. In v2, you've total control on the video component.
For advanced configuration, such as infinite loop, check the rest of the documentation and custom controls bar. youtubeCustomUrl - Youtube video URLs extracted from YouTube stream - Get all the details about YouTube videos
import React, { Component } from "react";
import { View } from "react-native";
import Video from "react-native-video";
import {
VideoPlayer,
DefaultMainControl,
DefaultBottomControlsBar,
videoId,
} from "react_native_youtube_streamer";
export default class App extends Component {
render() {
return (
<VideoPlayer
autoStart={false}
mainControl={(args) => <DefaultMainControl {...args} />}
bottomControl={(args) => <DefaultBottomControlsBar {...args} />}
videoId="tsPSBLX1GPg" //<-- youtube-video-id -->
>
{(args) =>
args.youtubeCustomUrl && (
<Video
ref={args.playerRef}
source={{
uri: args.youtubeCustomUrl,
}}
style={styles.backgroundVideo}
resizeMode="cover"
paused={args.videoPaused}
onLoad={args.onLoad}
onProgress={args.onProgress}
onEnd={args.onEnd}
/>
)
}
</VideoPlayer>
);
}
}
var styles = StyleSheet.create({
backgroundVideo: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
backgroundColor: "black",
},
});