CODEWITHSUNDEEP
javascriptioscssreact-nativevideo
Marlo Jones
Marlo Jones

Reputation: 103

React Native video wont play local file

I'm trying to play a video from my local file system the video players shows up but the video wont even show on phone or it wont even play, am i doing something wrong, i know exactly where my file is located it just wont play its literally a video player with just a blank screen.?

here is the code im using below showing a empty video player

import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { Video } from 'expo';
import { MaterialIcons, Octicons } from '@expo/vector-icons';


export default class App extends React.Component {
  state = {
    mute: false,
    shouldPlay: true,
  }

  handlePlayAndPause = () => {  
    this.setState((prevState) => ({
       shouldPlay: !prevState.shouldPlay  
    }));
  }

  handleVolume = () => {
    this.setState(prevState => ({
      mute: !prevState.mute,  
    }));
  }



  render() {
    const { width } = Dimensions.get('window');

    return (
      <View style={styles.container}>
        <View>
            <Text style={{ textAlign: 'center' }}> spiderman </Text>
            <Video
              source={{ uri: 'file://C:\Windows\System32\avenger\spiderman.mp4' }}
              shouldPlay={this.state.shouldPlay}
              resizeMode="cover"
              style={{ width, height: 300 }}
              isMuted={this.state.mute}
            />
            <View style={styles.controlBar}>
              <MaterialIcons 
                name={this.state.mute ? "volume-mute" : "volume-up"}
                size={45} 
                color="white" 
                onPress={this.handleVolume} 
              />
              <MaterialIcons 
                name={this.state.shouldPlay ? "pause" : "play-arrow"} 
                size={45} 
                color="white" 
                onPress={this.handlePlayAndPause} 
              />
            </View>
          </View>
      </View>
    );
  }
  }


 const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  controlBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 45,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "rgba(0, 0, 0, 0.5)",
  }
});

Upvotes: 6

Views: 15758

Answers (3)

Prokash Dev
Prokash Dev

Reputation: 77

import Video from "react-native-video";
import React from "react";
import styles from "./styles";
import Header from "../common/Header";
import { propsHeader } from "../../utils/types";

const VideoList: React.FC<propsHeader> = () => {
  const data = [
    {
      key: "1",
      path: "file:///storage/emulated/0/Android/data/com.overlayrecorder/files/ReactNativeRecordScreen/HD2023-06-02-18-45-25.mp4",
    },
    {
      key: "2",
      path: "file:///storage/emulated/0/Android/data/com.overlayrecorder/files/ReactNativeRecordScreen/HD2023-06-02-18-45-25.mp4",
    },
    {
      key: "3",
      path: "file:///storage/emulated/0/Android/data/com.overlayrecorder/files/ReactNativeRecordScreen/HD2023-06-02-18-45-25.mp4",
    },
  ];
  return (
    <View style={styles.container}>
      <Header title={"Videos"} />
      <FlatList
        data={data}
        style={styles.videoListContainer}
        renderItem={({ item }) => (
          <View style={styles.videoCardView}>
            <Video
              source={{ uri: item.path }}
              resizeMode={"contain"}
              paused={false}
              repeat={true}
              style={{ flex: 1 }}
            />
          </View>
        )}
        keyExtractor={(item) => item.key}
      />
    </View>
  );
};

export default VideoList;

This is the code to get the video from local storage of the phone.

Upvotes: 0

DNA.h
DNA.h

Reputation: 863

for local files you should use require not uri also I tried to reproduce your code but I'm not sure about file: syntax in React Native. so I instead used relative path

        <Video
          source={require('./utils/video_2018-08-16_14-12-06.mp4')}
          shouldPlay={this.state.shouldPlay}
          resizeMode="cover"
          style={{ width, height: 300 }}
          isMuted={this.state.mute}
        />

Upvotes: 9

RealPawPaw
RealPawPaw

Reputation: 986

By the looks of it, the video is stored on a computer: source={{ uri: 'file://C:\Windows\System32\avenger\spiderman.mp4' }}

You haven't told us where the website is though. If it is a local website, it should work. But if it is on the web, it obviously won't work, as it is referring to a video that is stored on a computer, not on the internet. You need to upload that video to the website host, and change the source. This question isn't really CSS though.

Upvotes: -1

Related Questions