Tengo una matriz de allUrls[0] que contiene las URL en cada índice. A través de este código, puedo reproducir el primer video, pero el video no se reproduce en el siguiente enlace.

 import React, { useEffect, useState } from "react"; import { connect } from "react-redux"; import { Button } from "@material-ui/core"; import "./VideoEditorPreview.css"; import ImgCropper from "../Cropper/ImgCropper"; import { assetDownloadUrl } from "../../actions/asset"; import ReactPlayer from 'react-player' const VideoEditorPreview = ({ asset, dispatch, previewFile, VideoEditorPreviewWidth, VideoEditorPreviewHeight, showDia, setShowDia, }) => { const [data, setData] = useState([]) useEffect(() => { if (data) { let items = JSON.parse(localStorage.getItem("timelineFrames")) setData([{ items: items[0].files }]) } }, []) console.log(data); //in this function I mapped the allUrls to get all the url const allUrls = data.map((item) => { let a = [] console.log(data[0].items); for (let index = 0; index < data[0].items.length; index++) { a.push(item.items[index].url); } return a }) console.log(allUrls[0]); //its contain the list of url //tried this function but didn't worked const nextVideo = allUrls.map((item) => { for (let index = 0; index < allUrls[0].length; index++) { return (item + 1); } }) console.log(nextVideo); return ( <> <ReactPlayer id="vid" height="100%" width="100%" url={allUrls[0]} controls /> </> ); }; const mapStateToProps = (state) => ({ asset: state.asset, }); export default connect(mapStateToProps)(VideoEditorPreview);

Pensé en agregarle el siguiente botón de video, pero creo que lo implementé de manera incorrecta.

La imagen contiene información acerca de allUrls[0]