Displaying video in 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?

wow you, https://hackernoon.com/video-streaming-in-your-react-native-app-feae1c6ae4e2 — parlad, Dec 25 '18 at 04:50

score 1 · Answer 1 · answered Dec 25 '18 at 03:35

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.

score 1 · Answer 2 · answered Dec 25 '18 at 16:48

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); }

what about amazon s3 videos? https://stackoverflow.com/questions/54196118/play-amazon-s3-cloudefront-video-in-react-native — Kedar Dave, Jan 15 '19 at 09:50

Displaying video in React-Native

2 Answers2