我如何讓本機反應播放多個本地文件

Question

我想播放多個視頻，我有這個設置，但視頻不會顯示我不知道我是否必須添加路徑，或者我只是從 const 添加所有錯誤我基本上知道如何播放一個視頻購買添加它源，但我想玩更多，但我不知道如何從本地文件中導入它們？ 任何建議都會有所幫助，提前致謝

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

const VIDEOS = [   // replace these links with links to your videos
  './spiderman.mp4',
  'C:\Windows\System32\avengerproject2\spiderman.mp4',
  'C:\Windows\System32\avengerproject2\spiderman.mp4'
  ]


export default class App extends React.Component {
    state = {
        currentVideo: 0,
      mute: false,
      shouldPlay: true,
    }
    handlePlayAndPause = () => {
        this.setState(prevState => ({
            shouldPlay: !prevState.shouldPlay
        }));
    }
    handleVolume = () => {
        this.setState(prevState => ({
            mute: !prevState.mute,
        }));
  }

  forwardButton = () => {
    if (this.state.currentVideo != VIDEOS.length-1) {
       this.setState({currentVideo: this.state.currentVideo + 1});
    } else {
       this.setState({currentVideo: 0});
    }
 }
 backButton = () => {
    if (this.state.currentVideo != 0) {
       this.setState({currentVideo: this.state.currentVideo - 1});
    } else {
       this.setState({currentVideo: VIDEOS.length-1});
    }
 }
 render() {
  const { width } = Dimensions.get('window');

  return (
      <View style={styles.container}>
      <ImageBackground
  source={{uri:'https://wallpapercave.com/wp/aqm17QD.jpg'}}
    style={{width: '100%', height: '100%'}}>
         <View >
            <Text style={{ textAlign: 'center', fontSize: 18, 
                fontWeight: 'bold' }}>Welcome spiderman</Text>
            <Video  source =
              {{uri: VIDEOS[this.state.currentVideo]}}
              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 style={{flex: .25, flexDirection: 'row', 
          alignItems: 'center'}}>
       <MaterialIcons
          name={"navigate-before"}
          size={150}
          color="white"
          onPress={this.backButton}
       />
       <Text>Next Video</Text>
       <MaterialIcons
          name={"navigate-next"}
          size={150}
          color="white"
          onPress={this.forwardButton}
       />
    </View>
    </ImageBackground>
  </View>
);
}
}


 const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#B32E2E',
    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

您的問題似乎無法訪問您的視頻文件。 （也不確定您的其余代碼）

如果您想訪問應用程序中的任何類型的資產，您有兩種選擇。

1) 從服務器流式傳輸視頻。

這將允許您像處理本地 mp4 文件一樣添加視頻鏈接。 ( https://videostoragesite.com/spiderman.mp4 )

2) 將資產添加到您的捆綁包中。

您可以使用 Expo 的資產管理器執行此操作，或者將您的項目彈出到 vanilla react 本機項目並使用 Xcode 或 Android Studio 將 mp4 文件捆綁到您的應用程序中。