Play youtube video in react-native-video - react-native

Question

How can i play youtube video on react-native-video,
i don't want to play video in react-native-youtube or in webview,

Answer 1

Another option that I have checked and used is the WebView. To use it make sure you put the component in a View with a flex. Ex:
<View style={{flex: 1}}>
<WebView
style={ { marginTop: (Platform.OS == 'ios') ? 20 : 0,} }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/'+this.state.pictureData.idVideo }}
/>
</View>
in my case, what I did was to obtain the identifying part of the YouTube video that would be for example: https://www.youtube.com/watch?v=KQ6zr6kCPj8
this.state.pictureData.idVideo would contain only: KQ6zr6kCPj8
To use it install:
$ npm install --save react-native-webview
link react-native-webview
and if you want more information:
https://github.com/react-native-community/react-native-webview

Answer 2

react-native-video does not support YouTube playback. This is something we have been investigating in our own projects. While it will support playback of Vimeo pro videos due to the direct HLS and MP4 files being exposed, YouTube does not provide this reliably. It used to be sometimes possible to get the direct video URL from some YouTube videos but that is not reliable anymore and might not even be possible with the latest API.
Currently, we have been dumping out to the YouTube app or the YouTube site in order to avoid having to implement the official react-native-youtube repository, but we will be eventually integrating with that repo in order to provide a more seamless user experience.
I understand that you don't want to use this solution, but, unfortunately, using react-native-video is not an option for you for this issue right now, and likely never will be. See this SO question for more.

Answer 3

A solution to your question is to use react-native youtube.
react-native-youtube
Here is an example I tried :
import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView, TouchableOpacity, PixelRatio, Platform, Button, Dimensions, } from 'react-native';
import YouTube, { YouTubeStandaloneIOS, YouTubeStandaloneAndroid } from 'react-native-youtube';
export default class YouTubeExample extends Component {
state = {
isReady: false,
status: null,
quality: null,
error: null,
isPlaying: true,
isLooping: true,
duration: 0,
currentTime: 0,
fullscreen: false,
playerWidth: Dimensions.get('window').width,
};
constructor(props){
super(props);
}
_youTubeRef = React.createRef();
render(){
const YOUR_API_KEY = "paste yout api key here";
return (<View>
<ScrollView style={styles.container}>
<Text style={styles.welcome}>{'<YouTube /> component for React Native.'} </Text>
<YouTube
ref={this._youTubeRef}
// You must have an API Key for the player to load in Android
apiKey = {YOUR_API_KEY}
// Un-comment one of videoId / videoIds / playlist.
// You can also edit these props while Hot-Loading in development mode to see how
// it affects the loaded native module
//videoId="ncw4ISEU5ik"
// videoIds={['uMK0prafzw0', 'qzYgSecGQww', 'XXlZfc1TrD0', 'czcjU1w-c6k']}
playlistId="PL3c6c2pNE7cLc5a0zpz7xZOW38H7lzzKM"
play={this.state.isPlaying}
loop={this.state.isLooping}
fullscreen={this.state.fullscreen}
controls={1}
style={[
{ height: PixelRatio.roundToNearestPixel(this.state.playerWidth / (16 / 9)) },
styles.player,
]}
onError={e => {
this.setState({ error: e.error });
}}
onReady={e => {
this.setState({ isReady: true });
}}
onChangeState={e => {
this.setState({ status: e.state });
}}
onChangeQuality={e => {
this.setState({ quality: e.quality });
}}
onChangeFullscreen={e => {
this.setState({ fullscreen: e.isFullscreen });
}}
onProgress={e => {
this.setState({ currentTime: e.currentTime });
}}
/>
{/* Playing / Looping */}
<View style={styles.buttonGroup}>
<Button
title={this.state.status == 'playing' ? 'Pause' : 'Play'}
color={this.state.status == 'playing' ? 'red' : undefined}
onPress={() => {
this.setState(state => ({ isPlaying: !state.isPlaying }));
}}
/>
<Text> </Text>
<Button
title={this.state.isLooping ? 'Looping' : 'Not Looping'}
color={this.state.isLooping ? 'green' : undefined}
onPress={() => {
this.setState(state => ({ isLooping: !state.isLooping }));
}}
/>
</View>
{/* Previous / Next video */}
<View style={styles.buttonGroup}>
<Button
title="Previous Video"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.previousVideo();
}
}}
/>
<Text> </Text>
<Button
title="Next Video"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.nextVideo();
}
}}
/>
</View>
{/* Go To Specific time in played video with seekTo() */}
<View style={styles.buttonGroup}>
<Button
title="15 Seconds"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.seekTo(15);
}
}}
/>
<Text> </Text>
<Button
title="2 Minutes"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.seekTo(2 * 60);
}
}}
/>
<Text> </Text>
<Button
title="15 Minutes"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.seekTo(15 * 60);
}
}}
/>
</View>
{/* Play specific video in a videoIds array by index */}
{this._youTubeRef.current &&
this._youTubeRef.current.props.videoIds &&
Array.isArray(this._youTubeRef.current.props.videoIds) && (
<View style={styles.buttonGroup}>
{this._youTubeRef.current.props.videoIds.map((videoId, i) => (
<React.Fragment key={i}>
<Button
title={`Video ${i}`}
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.playVideoAt(i);
}
}}
/>
<Text> </Text>
</React.Fragment>
))}
</View>
)}
{/* Get current played video's position index when playing videoIds (and playlist in iOS) */}
<View style={styles.buttonGroup}>
<Button
title={'Get Videos Index: ' + this.state.videosIndex}
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current
.getVideosIndex()
.then(index => this.setState({ videosIndex: index }))
.catch(errorMessage => this.setState({ error: errorMessage }));
}
}}
/>
</View>
{/* Fullscreen */}
{!this.state.fullscreen && (
<View style={styles.buttonGroup}>
<Button
title="Set Fullscreen"
onPress={() => {
this.setState({ fullscreen: true });
}}
/>
</View>
)}
{/* Get Duration (iOS) */}
{Platform.OS === 'ios' && (
<View style={styles.buttonGroup}>
<Button
title="Get Duration (iOS)"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current
.getDuration()
.then(duration => this.setState({ duration }))
.catch(errorMessage => this.setState({ error: errorMessage }));
}
}}
/>
</View>
)}
{/* Get Progress & Duration (Android) */}
{Platform.OS === 'android' && (
<View style={styles.buttonGroup}>
<Button
title="Get Progress & Duration (Android)"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current
.getCurrentTime()
.then(currentTime => this.setState({ currentTime }))
.catch(errorMessage => this.setState({ error: errorMessage }));
this._youTubeRef.current
.getDuration()
.then(duration => this.setState({ duration }))
.catch(errorMessage => this.setState({ error: errorMessage }));
}
}}
/>
</View>
)}
{/* Standalone Player (iOS) */}
{Platform.OS === 'ios' && YouTubeStandaloneIOS && (
<View style={styles.buttonGroup}>
<Button
title="Launch Standalone Player"
onPress={() => {
YouTubeStandaloneIOS.playVideo('KVZ-P-ZI6W4')
.then(() => console.log('iOS Standalone Player Finished'))
.catch(errorMessage => this.setState({ error: errorMessage }));
}}
/>
</View>
)}
{/* Standalone Player (Android) */}
{Platform.OS === 'android' && YouTubeStandaloneAndroid && (
<View style={styles.buttonGroup}>
<Button
style={styles.button}
title="Standalone: One Video"
onPress={() => {
YouTubeStandaloneAndroid.playVideo({
apiKey: 'YOUR_API_KEY',
videoId: 'KVZ-P-ZI6W4',
autoplay: true,
lightboxMode: false,
startTime: 124.5,
})
.then(() => {
console.log('Android Standalone Player Finished');
})
.catch(errorMessage => {
this.setState({ error: errorMessage });
});
}}
/>
<Text> </Text>
<Button
title="Videos"
onPress={() => {
YouTubeStandaloneAndroid.playVideos({
apiKey: 'YOUR_API_KEY',
videoIds: ['HcXNPI-IPPM', 'XXlZfc1TrD0', 'czcjU1w-c6k', 'uMK0prafzw0'],
autoplay: false,
lightboxMode: true,
startIndex: 1,
startTime: 99.5,
})
.then(() => {
console.log('Android Standalone Player Finished');
})
.catch(errorMessage => {
this.setState({ error: errorMessage });
});
}}
/>
<Text> </Text>
<Button
title="Playlist"
onPress={() => {
YouTubeStandaloneAndroid.playPlaylist({
apiKey: 'YOUR_API_KEY',
playlistId: 'PLF797E961509B4EB5',
autoplay: false,
lightboxMode: false,
startIndex: 2,
startTime: 100.5,
})
.then(() => {
console.log('Android Standalone Player Finished');
})
.catch(errorMessage => {
this.setState({ error: errorMessage });
});
}}
/>
</View>
)}
{/* Reload iFrame for updated props (Only needed for iOS) */}
{Platform.OS === 'ios' && (
<View style={styles.buttonGroup}>
<Button
title="Reload iFrame (iOS)"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.reloadIframe();
}
}}
/>
</View>
)}
<Text style={styles.instructions}>
{this.state.isReady ? 'Player is ready' : 'Player setting up...'}
</Text>
<Text style={styles.instructions}>Status: {this.state.status}</Text>
<Text style={styles.instructions}>Quality: {this.state.quality}</Text>
{/* Show Progress */}
<Text style={styles.instructions}>
Progress: {Math.trunc(this.state.currentTime)}s ({Math.trunc(this.state.duration / 60)}:
{Math.trunc(this.state.duration % 60)}s)
{Platform.OS !== 'ios' && <Text> (Click Update Progress & Duration)</Text>}
</Text>
<Text style={styles.instructions}>
{this.state.error ? 'Error: ' + this.state.error : ''}
</Text>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'grey',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
buttonGroup: {
flexDirection: 'row',
alignSelf: 'center',
paddingBottom: 5,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
player: {
alignSelf: 'stretch',
marginVertical: 10,
},
});
For the API Key, follow this link :
API Key
You have the id of the playlist in the address :
Install the component like this :
npm install react-native-youtube -S
I had errors with '#Nullable', if you have the same problem, go to
node_modules\react-native-youtube\android\build.gradle
and in 'dependencies' section, add this line :
implementation 'androidx.annotation:annotation:1.1.0'
Maybe you'll need to clean gradle:
cd android
gradlew clean (or .\gradlew clean)
This is a snapshot of my actual android emulator :

Answer 4

React native video doesn't have the feature to play a youtube video for that you have to use external libraries as mentioned above like webView or react native youtube.
I personally used Youtube Iframe Visit https://www.npmjs.com/package/react-native-youtube-iframe, it is a much newer library compared to others and has some wonderful features like you can hide controls and also alter the state of the displayed video
I have listed the code example below on how to use it in your component(functional).
import React, { useState, useCallback } from "react";
import { View, Text, SafeAreaView, TouchableOpacity, Image, ScrollView,
StatusBar, StyleSheet, Button, Linking } from 'react-native';
import { scale, verticalScale, moderateScale, scaleFont, fullHeight,
fullWidth, constants, colors } from './utils'
import Video from 'react-native-video';
import YoutubePlayer from "react-native-youtube-iframe";
import Modal from "react-native-modal";
import { Mute, Unmute, DashBoardLogo, Truck, Gift, MMtLogo } from "./assets/images";
const Dashboard = (props) => {
const [mute, setMute] = useState(true);
const video = require('./assets/Video/video.mp4')
const [mute2, setMute2] = useState(false);
const [isVisible, setisvisible] = useState(false)
const togglemute = useCallback(() => {
setMute((prev) => !prev);
}, [])
const togglemute2 = useCallback(() => {
setMute2((prev) => !prev);
}, [])
return (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<SafeAreaView style={{ flex: 0, backgroundColor: '#fff' }} />
<StatusBar
hidden={false} translucent={false}
networkActivityIndicatorVisible={true}
backgroundColor={"#fff"}
barStyle={"dark-content"}
/>
<Modal
deviceHeight={fullHeight}
deviceWidth={fullWidth}
isVisible={isVisible}
animationIn="slideInRight"
animationOut="slideOutRight"
><SafeAreaView style={{ flex: 0, backgroundColor: '#fff' }} />
<StatusBar
hidden={false} translucent={false}
networkActivityIndicatorVisible={true}
backgroundColor={"#fff"}
barStyle={"dark-content"}
/>
<ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1, backgroundColor: '#fff', width: fullWidth, alignSelf: 'center', height: fullHeight, position: 'absolute' }}>
<TouchableOpacity onPress={() => setisvisible(false)} >
<Text style={{ color: 'red', alignSelf: 'center', fontWeight: '700', marginTop: verticalScale(20), fontSize: scaleFont(24), width: scale(100), textAlign: 'center' }}>Close</Text>
</TouchableOpacity>
<Text style={{ color: '#000', fontSize: scaleFont(20), fontWeight: '600', marginLeft: scale(20), marginTop: verticalScale(30) }} >Libraries Used:</Text>
<View style={{ flexDirection: 'row', width: scale(340), alignSelf: 'center' }}>
<View style={{ color: 'grey', marginTop: verticalScale(10) }} >
<Text style={{ color: 'grey' }} >react-native-youtube-iframe</Text>
<Text style={{ color: 'grey' }} >react-native-video</Text>
<Text style={{ color: 'grey' }} >react-native-modal </Text>
<Text style={{ color: 'grey' }} >react-native-svg and</Text>
<Text style={{ color: 'grey' }} >react-native-svg-transformer</Text>
</View>
<View style={{ color: 'grey', marginTop: verticalScale(10) }} >
<Text style={{ color: 'grey' }} > : To play the first video</Text>
<Text style={{ color: 'grey' }} > : To play the second video</Text>
<Text style={{ color: 'grey' }} > : For Showing this modal</Text>
<Text style={{ color: 'grey', }} > : To use svg images for</Text>
<Text style={{ color: 'grey', }} > better clarity</Text>
</View>
</View>
<View style={{ width: scale(330), alignSelf: 'center' }}>
<Text style={{ color: '#000', fontSize: scaleFont(20), fontWeight: '600', marginTop: verticalScale(30) }} >Description</Text>
<Text style={{ color: 'grey', width: scale(330), alignSelf: 'center' }} >This project is designed using react-native --version 0.68, I have a two seperate cards to play the videos, the first video is being played using youtube Iframe , the second video is present in the local file and being played through the react-native-video library, also used svg libraries to enhance the quality of icons and images used in the project</Text>
</View>
<View style={{ width: scale(330), alignSelf: 'center', }}>
<Text style={{ color: 'red', fontSize: scaleFont(20), fontWeight: '600', marginTop: verticalScale(30) }} >Note</Text>
<Text style={{ color: 'grey', }} >I have tried to make the functionalities similar to the figma file but for any sugesstion or review please feel free to contact me at <Text onPress={() => Linking.openURL('mailto:hpratap97#gmail.com')} style={{ color: colors.primary }} >hpratap97#gmail.com</Text>, <Text style={{ color: '#000', fontWeight: '700' }}>8958460383</Text></Text>
</View>
<View style={{ alignSelf: 'center', width: scale(330), marginTop: verticalScale(50), marginBottom: verticalScale(100) }}>
<Text style={{ color: '#000', fontSize: scale(20), marginTop: verticalScale(30), fontWeight: '700' }}>Regards,</Text>
<Text style={{ color: '#000' }}>Harsh Pratap Singh</Text>
</View>
</ScrollView>
</Modal >
<ScrollView overScrollMode="never">
<View style={{}}>
{/* Header */}
<View style={{ alignSelf: 'center', flexDirection: 'row', justifyContent: "space-between", alignItems: 'center', width: scale(329), height: verticalScale(47.96), marginTop: verticalScale(10) }}>
<View>
<Text style={{
fontSize: scaleFont(12), fontWeight: "500", color: 'rgba(17, 20, 45, 0.65)'
}}>
Welcome Back
</Text>
<Text style={{
fontSize: scaleFont(24), fontWeight: "600", color: '#11142D'
}}
>
Rahul Kumar
</Text>
</View>
<TouchableOpacity
onPress={() => setisvisible(true)}
style={{
width: verticalScale(38), height: verticalScale(38), borderRadius: verticalScale(100), shadowColor: 'green', shadowOffset: { width: 0.25, height: 0.25 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 4, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center',
}}>
<DashBoardLogo />
</TouchableOpacity>
</View>
{/* First Card */}
<View style={{ width: scale(332), height: verticalScale(480.29), marginTop: verticalScale(28.72), borderRadius: verticalScale(17), alignSelf: 'center', shadowColor: colors.shadowColor, shadowOffset: { width: 0, height: 0.25 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 4, backgroundColor: '#fff', }}>
<View style={{ height: verticalScale(255), backgroundColor: '#000', borderTopLeftRadius: verticalScale(17.71), borderTopRightRadius: verticalScale(17.71), justifyContent: 'center', alignItems: 'center' }}>
<YoutubePlayer
height={verticalScale(255)}
width={scale(320)}
play={true}
playList={["kV__iZuxDGE"]}
mute={mute}
initialPlayerParams={{ controls: false, loop: true, rel: false, iv_load_policy: 3 }}
/>
{
mute ? (<TouchableOpacity
activeOpacity={1}
onPress={togglemute}
style={{
width: scale(49),
height: verticalScale(31),
backgroundColor: 'grey',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
marginTop: verticalScale(-40),
marginRight: scale(11),
borderRadius: verticalScale(6),
}}>
<Mute />
</TouchableOpacity>) : (<TouchableOpacity
onPress={togglemute}
activeOpacity={1}
style={{
width: scale(49),
height: verticalScale(31),
backgroundColor: 'grey',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
marginTop: verticalScale(-40),
marginRight: scale(11),
borderRadius: verticalScale(6),
}}
>
<Unmute />
</TouchableOpacity>)
}
</View>
<View>
<Text
style={{ marginTop: verticalScale(13.68), fontSize: scaleFont(12), color: '#6F767E', fontWeight: "600", marginLeft: scale(19) }}
>
IPHONE SAVINGS PLAN
</Text>
<Text style={{ fontSize: scaleFont(23), fontWeight: '700', marginTop: verticalScale(5.5), width: scale(290), color: '#001B19', marginLeft: scale(19), }}>
Save up for the next iPhone and <Text style={{ color: 'green' }}>get 10% Cashback!</Text>
</Text>
<View style={{ flexDirection: 'row', alignSelf: 'center', marginTop: verticalScale(14.11), alignItems: 'center', justifyContent: 'space-between', width: scale(293.27) }}>
<View>
<TouchableOpacity style={{
width: scale(79.26), height: verticalScale(59.45), backgroundColor: 'rgba(239, 239, 239, 1)', borderRadius: verticalScale(4), justifyContent: 'center', alignItems: 'center'
}}>
<Truck />
</TouchableOpacity>
<Text style={{ alignSelf: 'center', fontSize: scaleFont(10), fontWeight: '600', color: 'rgba(0, 0, 0, 0.5)' }}>Priority Delivery</Text>
</View>
<View>
<TouchableOpacity style={{
width: scale(79.26), height: verticalScale(59.45), backgroundColor: 'rgba(239, 239, 239, 1)', borderRadius: verticalScale(4), justifyContent: 'center', alignItems: 'center'
}}>
<Image source={require('./assets/images/Charger1.png')} style={{ marginTop: verticalScale(6) }} />
</TouchableOpacity>
<Text style={{ alignSelf: 'center', fontSize: scaleFont(10), fontWeight: '600', color: 'rgba(0, 0, 0, 0.5)' }}>Free Charger</Text>
</View>
<View>
<TouchableOpacity style={{
width: scale(79.26), height: verticalScale(59.45), backgroundColor: 'rgba(239, 239, 239, 1)', borderRadius: verticalScale(4), justifyContent: 'center', alignItems: 'center'
}}>
<Gift />
</TouchableOpacity>
<Text style={{ alignSelf: 'center', fontSize: scaleFont(10), fontWeight: '600', color: 'rgba(0, 0, 0, 0.5)' }}>Tortoise Merch</Text>
</View>
</View>
</View>
</View>
{/* Second Card */}
<View style={{ width: scale(332), height: verticalScale(531), marginTop: verticalScale(28.72), borderRadius: verticalScale(17), alignSelf: 'center', shadowColor: colors.shadowColor, shadowOffset: { width: 0, height: 0.25 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 4, backgroundColor: '#fff', marginBottom: verticalScale(100) }}>
<View style={{ height: verticalScale(420), borderTopLeftRadius: verticalScale(17), borderTopRightRadius: verticalScale(17), }}>
<Video source={video}
play={true}
repeat={true}
style={{ height: verticalScale(415), borderTopLeftRadius: verticalScale(17), borderTopRightRadius: verticalScale(17) }}
/>
{
mute2 ? (<TouchableOpacity
activeOpacity={1}
onPress={togglemute2}
style={{
width: scale(49),
height: verticalScale(31),
backgroundColor: 'grey',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
marginTop: verticalScale(-40),
marginRight: scale(11),
borderRadius: verticalScale(6),
}}>
<Mute />
</TouchableOpacity>) : (<TouchableOpacity
onPress={togglemute2}
activeOpacity={1}
style={{
width: scale(49),
height: verticalScale(31),
backgroundColor: 'grey',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
marginTop: verticalScale(-40),
marginRight: scale(11),
borderRadius: verticalScale(6),
}}
>
<Unmute />
</TouchableOpacity>)
}
<MMtLogo style={{ marginTop: verticalScale(-55), marginLeft: scale(18) }} />
</View>
<View>
<Text
style={{ marginTop: verticalScale(13.68), fontSize: scaleFont(12), color: '#6F767E', fontWeight: "600", marginLeft: scale(19) }}
>
MAKE MY TRIP SAVINGS PLAN
</Text>
<Text style={{ fontSize: scaleFont(20), fontWeight: '700', marginTop: verticalScale(5.5), width: scale(290), color: '#001B19', marginLeft: scale(19), }}>
Save up for the next Vacation and <Text style={{ color: 'green' }}>get 10% Cashback!</Text>
</Text>
</View>
</View>
</View>
</ScrollView>
</View >
);
}
export default Dashboard;
But if still you doesn't want to use any library and use the react native video component then you have to host your videos on a different server to use them in your application

Answer 5

You can't play Youtube video with react-native-video module. It is not supported at this moment and never was. Also it doesn't seem to be in their roadmap. So you should discuss other options and i recommend latest version of react-native-webview. I have tested it myself and works great. Especially i love the thing that they added fullscreen mode for android.

Answer 6

Well, I haven't tried it yet, but I will need it in my project. As I read there is a package called: react-native-youtube
Here some information about the package: https://www.npmjs.com/package/react-native-youtube
If you wait for tomorrow I check and I tell you, if you do and I left if you could tell how it went ... ^^