如何默认情况下按顺序播放视频列表而不单击下一步按钮使用反应本机 cli 从设备的本地文件访问

Question

const filePath = `${dirs.DownloadDir}/samplevideos/1.mp4`;
const filePath1 = `${dirs.DownloadDir}/samplevideos/2.mp4`;
const paths = [{path:filePath},{path:filePath1}]

 {paths&&paths.map((data,inx)=>{
      return  <Video key={inx} source={{uri:data.path }}
                     volume={50}
                     resizeMode="cover"
                     style={styles.videoStyle}
              />
    })}

我试过了，但只播放了最后一个视频。任何帮助将不胜感激。

Answer 1

我找到了这个问题的解决方案，所以在这里发帖可能对以后的人有所帮助。

基于下一个视频的递增索引，在 react-native-video 中有一个可用的 onEnd 回调

import React,{useEffect,useState} from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  Dimensions,
  PermissionsAndroid
} from 'react-native';

import Video from 'react-native-video';
import RNFetchBlob from 'rn-fetch-blob';

const FILE_PATHS = `${RNFetchBlob.fs.dirs.DownloadDir}/samplevideos/`;

const App = () => {

  const [videoPaths,setVideosPath] = useState([]);
  const [inxofCurrentVideo,setVideoIndex] = useState(0);

  useEffect(() => {
    PermissionsAndroid.RESULTS.GRANTED;
    getVideoPaths();
  },[])


  const getVideoPaths = ()=>{
    RNFetchBlob.fs.ls(FILE_PATHS).then(files => {
      setVideosPath(files);
    }).catch(error => console.log(error))
  };
      const onEnd =()=> {
    if((inxofCurrentVideo < videoPaths.length) || (videoPaths.length === inxofCurrentVideo)){
      setVideoIndex(inxofCurrentVideo+1);
    }
  }

  return (
    <View style={styles.videoContainer}>
      <View style={styles.row}>
      {videoPaths.length>0&&<Video onEnd = {onEnd}
        source={{uri:(FILE_PATHS + videoPaths[inxofCurrentVideo])}}
        volume={50}
        resizeMode="cover"
        style={styles.videoStyle}
       /> }      
      </View>

    </View>
  );
};

const styles = StyleSheet.create({
  videoContainer: {
    flex: 1,

   // backgroundColor: 'black',
  },
  row: {
    flex: 1,
    flexDirection: "row",
    width: '100%'
  },
  col6: {
    width: "50%"
  },
videoStyle: {
    position: 'absolute',
    top: 0,
    bottom: 5,
    left: 0,
    right: 0,
},
});

export default App;

如何默认情况下按顺序播放视频列表而不单击下一步按钮使用反应本机 cli 从设备的本地文件访问

How to play list of videos sequentially by default without clicking next button accessing from local files of the device using react native cli

react-native

react-native-video