Question

我正在尝试从本地文件系统中播放视频，即视频播放器出现了，但是视频甚至都不会在手机上显示或播放，我做错什么了吗，我确切知道文件的位置它只是不会播放空白的视频播放器屏幕。

下面是使用im的代码，其中显示了一个空的视频播放器

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

Answer 1

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

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

Answer 2

对于本地文件，您应该使用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}
        />

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

2 个答案: