Javascript React本机视频无法播放本地文件

我正在尝试从我的本地文件系统视频播放器播放视频 显示但视频甚至无法在手机上显示或播放， 如果我做错了什么，我确切地知道我的文件在哪里 它只是不会播放它的视频播放器只是一个空白 屏幕

下面是我使用的代码，显示一个空的视频播放器

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

从“React”导入React；
从“react native”导入{样式表、文本、视图、维度}；
从“expo”导入{Video}；
从“@expo/vector icons”导入{MaterialIcons，Octicons}；
导出默认类App扩展React.Component{
状态={
哑巴：错，
真的，
}
handlePlayAndPause=（）=>{
this.setState（（prevState）=>({
shouldPlay:！prevState.shouldPlay
}));
}
handleVolume=（）=>{
this.setState（prevState=>({
静音：！prevState.mute，
}));
}
render（）{
const{width}=Dimensions.get（'window'）；
返回(
蜘蛛侠
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
控制栏：{
位置：'绝对'，
底部：0，
左:0,，
右:0,，
身高：45，
flexDirection:'行'，
对齐项目：“居中”，
为内容辩护：“中心”，
背景色：“rgba（0,0,0,0.5）”，
}
});

从外观上看，视频存储在计算机上：

source={{uri:'file://C:\Windows\System32\avenger\spiderman.mp4'}

---

你还没有告诉我们网站在哪里。如果它是一个本地网站，它应该工作。但是如果是在网络上，它显然是不起作用的，因为它指的是存储在计算机上而不是互联网上的视频。您需要将该视频上载到网站主机，并更改源。但这个问题并不是真正的CSS。

对于本地文件，您应该使用

require

而不是

uri

我也尝试复制您的代码，但我不确定React Native中的

文件：

语法。所以我改用相对路径

        <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}
        />

我现在试过，它说无法解析模块file://Downloads/spiderman.mp4 '在haste模块中不存在。是的，您应该按照我的语法，将视频文件放在项目目录中，以便它与代码相关（即，同一文件夹或子文件夹等）。我怀疑react native能否访问其文件夹之外的文件。基本上，“haste模块地图中不存在”意味着react找不到本地文件。我将视频添加到项目文件夹中，但出现了找不到的错误。我尝试了，但仍然说找不到文件。是否可以将视频上载到云并从主机站点获取uri以供使用似乎效率很低（但可能）解决方案只需将“spiderman.mp4”和App.js放在同一个文件夹中，并使用{require（'./spiderman.mp4'）}我现在试过了，它说无法解析模块file://Downloads/spiderman.mp4 '在haste模块映射中不存在