Displaying video in React-Native - react-native

Question

I am trying to display a video in react-native. But having some issues. 'till now this what I did: I install react-native-video. and also linked it.
And this is the codes:
import React, {Component} from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
Button,
Alert} from 'react-native';
import Video from 'react-native-video';
export default class App extends Component<Props> {
Open() {
}
render() {
return (
<View style={styles.container}>
<Text>
Open the video
</Text>
<Button
onPress={this.Open}
title="Press Me"
/>
<Video
source={{ uri:"https://www.youtube.com/watch?v=HIB8RBhPkBA"}}
resizeMode={"cover"}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor : 'white',
alignItems: 'center',
justifyContent: 'center'
},
});
There is no error in the emulator. But also there is no video too. Is there anything that I did wrong about setup?

Answer 1

unfortunately, react-native-video will not work since the source uri is a link to the youtube page. unless you can procure the video as an asset and append its extension to its url (...video.mp4), it should work. see this.
for a quick fix, you can use the webview component to embed the link.

Answer 2

For displaying youtube videos, you can use this package instead
react-native-youtube
API
import YouTube from 'react-native-youtube'
<YouTube
videoId="KVZ-P-ZI6W4" // The YouTube video ID
play={true} // control playback of video with true/false
fullscreen={true} // control whether the video should play in fullscreen or inline
loop={true} // control whether the video should loop when ended
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
For getting the youtube id from the url, you can use
var video_id = window.location.search.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if(ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}