React Native 视频无法播放本地文件

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:WindowsSystem32avengerspiderman.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

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

Answer 2

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;

这是从手机的本地存储中获取视频的代码。

Answer 3

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

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