如何在默认情况下按顺序播放视频列表，而无需单击下一步按钮，使用 react native cli 从设备的本地文件访问

Posted 2023-03-15

【中文标题】如何在默认情况下按顺序播放视频列表，而无需单击下一步按钮，使用 react native 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

【发布时间】：2020-03-27 16:54:52

【问题描述】：

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

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

【参考方案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;