4

I am using react-native-cli and in my app, react-native-video doesn't work in my page. It shows blank space. I have already run react-native link command to link libraries and after I have run react-native run-android command but shows blank space without any error. I am using react-native v 0.48.4 Any help appreciated!!

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView,Image, Dimensions,Alert } from 'react-native';
import Video from 'react-native-video';


export default class HomeScreen extends Component {
  constructor(props) {
    super(props);

    this.loadStart = this.loadStart.bind(this);
    this.onLoad = this.onLoad.bind(this);
    this.onProgress = this.onProgress.bind(this);
    this.onEnd = this.onEnd.bind(this);
    this.onError = this.onError.bind(this);
    this.onBuffer = this.onBuffer.bind(this);
    this.onTimedMetadata = this.onTimedMetadata.bind(this);
  };

  loadStart(){
    console.log('loadStart');
  }
  onLoad(){
    console.log('onLoad');
  }

  onProgress(){
    console.log('onProgress');
  }

  onEnd(){
    console.log('onEnd');
  }

  onError(){
    console.log('onError');
  }

  onBuffer(){
    console.log('onBuffer');
  }

  onTimedMetadata(){
    console.log('onTimedMetadata');
  }

  render() {
    return (


        <View style={styles.container}>
          <Image style={styles.logo} source={require('../../images/logo.png')} />
          <View style={styles.Body}>
            <ScrollView>
              <View style={styles.scrollerInner}>
                <Video source={require('../../images/tndc-video.mp4')}   // Can be a URL {uri:'https://www.w3schools.com/html/mov_bbb.mp4'} or a local file require('').   
                  ref={(ref) => {this.player = ref}}               
                  muted={false}                           // Mutes the audio entirely.                  
                  resizeMode="cover"                      // Fill the whole screen at aspect ratio.*
                  repeat={false}                           // Repeat forever.
                  playInBackground={false}                // Audio continues to play when app entering background.
                  playWhenInactive={false}                // [iOS] Video continues to play when control or notification center are shown.
                  ignoreSilentSwitch={"ignore"}           // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
                  progressUpdateInterval={250.0}          // [iOS] Interval to fire onProgress (default to ~250ms)
                  onLoadStart={this.loadStart}            // Callback when video starts to load
                  onLoad={this.setDuration}               // Callback when video loads
                  onProgress={this.setTime}               // Callback every ~250ms with currentTime
                  onEnd={this.onEnd}                      // Callback when playback finishes
                  onError={this.videoError}               // Callback when video cannot be loaded
                  onBuffer={this.onBuffer}                // Callback when remote video is buffering
                  onTimedMetadata={this.onTimedMetadata}  // Callback when the stream receive some metadata
                  style={styles.videoPlayer} 
                />                
              </View>
            </ScrollView> 
          </View>
        </View> 


    );
  }
}    

const styles = StyleSheet.create({
  container: {
    flex:1,
    paddingTop:30,
    width:'100%',
  },
  logo:{
    width:260,
    height:66,
    marginBottom:20,
    marginLeft:20,
  },
  Body:{
    width:'100%',
    flexGrow:1,
    height:30
  },
  scrollerInner:{
    paddingHorizontal:20,
  },
  title:{
    fontSize:30,
    color:'#000',
    fontWeight:'bold',
    marginBottom:12,
  },
  description:{
    fontSize:16,
    color:'#000',
    marginBottom:20,
  },
  videoPlayer:{
    width:Dimensions.get('window').width,
    backgroundColor:'#000',
    height:300,
  }, 
});
bennygenel
  • 23,896
  • 6
  • 65
  • 78
Rajnikant Kakadiya
  • 2,185
  • 1
  • 23
  • 30

1 Answers1

5

I think that in your case main issue is with file location. Using require('../../images/tndc-video.mp4') you are going outside your project folder too look for files. In one of my recent projects I tried to do that for additional js files. You can do that by putting additional folders in webpack config but react packager didn't like that and it wasn't very stable. So "quick fix" for you is to put assets within the project folder like require('./images/tndc-video.mp4').

Additional findings

While experimenting with this issue I found a strange way how "require" works. Initially I thought this whole thing was a bundling issue with local assets but actually it's all about file names.

Using your code I got a black screen with the following source

source={require('./assets/google pixel 2 impressions.mp4')}

iOS simulator screenshot with spaces in file name I couldn't embed image, sorry.

But when I changed file name to use underscore instead of space it went well

source={require('./assets/google_pixel_2_impressions.mp4')}

iOS simulator screenshot with _ in file name

I think it might be helpful.

Container source code. I used your styles and helper functions.

    <Image style={styles.logo} source={require('./assets/so-logo.png')}//source={{uri:"https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png"}} 
    />

    <View style={styles.Body}>

    <ScrollView>
    <View style={styles.scrollerInner}>

        <Video 
            // source={require('../images/mov_bbb.mp4')}
            source={require('./assets/google_pixel_2_impressions.mp4')}
            // source={require('./assets/google pixel 2 impressions.mp4')}

            ref={(ref) => {this.player = ref}}               
            muted={false}                           
            resizeMode="cover"                      
            repeat={false}                          
            playInBackground={false}                
            playWhenInactive={false}                
            ignoreSilentSwitch={"ignore"}           
            progressUpdateInterval={250.0}          
            onLoadStart={this.loadStart}            
            onLoad={this.setDuration}               
            onProgress={this.setTime}               
            onEnd={this.onEnd}                      
            onError={this.videoError}               
            onBuffer={this.onBuffer}                
            onTimedMetadata={this.onTimedMetadata}  
            style={styles.videoPlayer} 
        />

    </View>
    </ScrollView>

    </View>
</View>

Tested with fresh react-native init project and react: 16.0.0-beta.5, react-native: 0.49.1, react-native-video: 2.0.0.

Dennis Tsoi
  • 1,349
  • 2
  • 11
  • 17
  • Thanks for your help Dennis! I have tried to put asset folder at my project root and gave path as per your suggestion but unfortunately it still not working :( shows blank space instead video and no error on android. – Rajnikant Kakadiya Oct 08 '17 at 09:03
  • Have you tried using uri for the test purposes? To see if the player works at all source={{uri:'https://www.w3schools.com/html/mov_bbb.mp4'}} If you are on windows there are additional steps to do before [react-native-video](https://github.com/react-native-community/react-native-video#windows) will work. If you are on mac, what is iOS simulator output? – Dennis Tsoi Oct 08 '17 at 09:35
  • Yes, tried with {{uri:'https://www.w3schools.com/html/mov_bbb.mp4'}} but same blank screen. – Rajnikant Kakadiya Oct 08 '17 at 10:01
  • Then we know that something wrong with the player setup, not the require or file names. I tried using the same code in genymotion and it [worked](https://imgur.com/a/tmpBY). Can you edit the post to show the contents of the following files? android/settings.gradle; android/app/build.gradle; android/app/src/main/java/com/PRJNAME/MainApplication.java – Dennis Tsoi Oct 08 '17 at 12:08
  • I also tried using uri as a source `{uri:'https://www.w3schools.com/html/mov_bbb.mp4'}`, it showed a white screen for a minute or so but then video played ok. – Dennis Tsoi Oct 08 '17 at 12:14
  • By the way, findings about file names are correct for android too. When i used file name with spaces `google pixel 2 impressions.mp4` it showed white [blank screen](https://imgur.com/a/G5IMJ) but when I changed it to `google_pixel_2_impressions.mp4` everything went ok. So double check your file names. – Dennis Tsoi Oct 08 '17 at 12:19
  • I have made new fresh setup with asset folder at my project root and keep file name as per your instruction but same problem there as well. Here is my code: https://drive.google.com/file/d/0B2H49UDpOlr4Y19HalZRRVRselk/view?usp=sharing can you please take a look there and let me know what I am missing there? Thanks for your help! – Rajnikant Kakadiya Oct 09 '17 at 05:27
  • Well, code works normal, there must be something with your system then. I just hit `react-native run-android` and everything [worked](https://imgur.com/a/hbIKQ). Are you on mac, windows or linux? And what type of android simulator do you use? Or is it a device? Because if it's a physical device I think you will need to bundle the assets before running on it. – Dennis Tsoi Oct 09 '17 at 08:25
  • I am on Windows using android studio emulator Nexus_5x – Rajnikant Kakadiya Oct 09 '17 at 08:29
  • Did you launch rn packager manually after the build? `react-native start` – Dennis Tsoi Oct 09 '17 at 08:40
  • Hm. Bundle url is present otherwise there wouldn't be anything on the screen. Try starting packager manually by `react-native start` and then reloading js in the emulator. – Dennis Tsoi Oct 09 '17 at 08:55
  • you mean react-native start and than react-native run-android right? – Rajnikant Kakadiya Oct 09 '17 at 08:56
  • I don't have a windows platform to test it but I think yes. Open a project directory in two command prompt windows and then run `react-native start` in the first and then `react-native run-android` in the second. If it fails you can try otherwise. – Dennis Tsoi Oct 09 '17 at 09:00
  • ok, I have used Nexus 5 instead of Nexus 5x and it's working !! Thank you very much for your help! – Rajnikant Kakadiya Oct 09 '17 at 09:24
  • Glad to hear that! Good luck with your endeavours. – Dennis Tsoi Oct 09 '17 at 09:26