React Native 视频不会播放本地文件

Posted 2023-03-15

【中文标题】React Native 视频不会播放本地文件

【英文标题】：React Native video wont play local file

【发布时间】：2018-08-20 05:25:06

【问题描述】：

我正在尝试通过视频播放器播放本地文件系统中的视频 出现了，但视频甚至无法在手机上显示，甚至无法播放， 我是不是做错了什么，我确切地知道我的文件所在的位置 它只是不会播放它实际上是一个只有空白的视频播放器 屏幕。？

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

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

【参考方案1】：

对于本地文件，您应该使用 require 而不是 uri 我也尝试重现您的代码，但我不确定 React Native 中的 file: 语法。所以我改用相对路径

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

【讨论】：

我现在试过了，它说无法解析模块文件：//Downloads/spiderman.mp4 '在急速模块图中不存在

是的，您应该按照我的语法，将视频文件放在您的项目目录中，以便它与您的代码相关（即同一文件夹或子文件夹等）。我怀疑 react native 可以访问其文件夹之外的文件。基本上“在急速模块地图中不存在”意味着反应找不到本地文件。

我将视频添加到项目文件夹并得到了无法找到的错误

我试过了，我仍然说找不到文件是否可以将视频上传到云端并从主机站点获取 uri 以使用

似乎是一个非常低效（但可能）的解决方案。只需将“spiderman.mp4”与您的 App.js 放在同一文件夹中并使用 require('./spiderman.mp4')

【参考方案2】：

从外观上看，视频存储在计算机上：source= uri: 'file://C:\Windows\System32\avenger\spiderman.mp4'

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

【讨论】：

我现在试过了，它说无法解析模块文件：//Downloads/spiderman.mp4 '在急速模块图中不存在