'Play youtube video in react-native-video
How can i play youtube video on react-native-video,
i don't want to play video in react-native-youtube or in webview,
Solution 1:[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
Solution 2:[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.
Solution 3:[3]
A solution to your question is to use 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 :
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 :
Solution 4:[4]
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.
Solution 5:[5]
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 ... ^^
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Olcay ErtaÅŸ |
| Solution 2 | avanr |
| Solution 3 | Flexo |
| Solution 4 | Sergo Kupreishvili |
| Solution 5 | IvanAllue |