0
181
Vistaspasar múltiples videos de almacenamiento local para reaccionar js reproductor de video emergente
creé el reproductor de video onclick react grid usando ag-grid. después de eso, pasar datos json a la cuadrícula.
después de pasar datos json mi ag-grid parece
Ahora pasé solo un video de almacenamiento local para reaccionar al reproductor de video (botón Reproducir)
import myData from "../video.mp4" .... .... <DialogContent> <iframe width="560" height="315" src={myData} allowFullScreen></iframe> </DialogContent>src={myData} representa video.mp4 en mi almacenamiento local, ahora cómo paso varios videos para reaccionar al reproductor de video usando el archivo json
mi estructura de archivos json como esta:
{ "users": [ { "id": 1, "name": "Hari", "email": "anbu@gmail.com", "phone": "9876543210", "dob": "/home/fraction/Music/agGrid-crudOperation/src/video1.mp4" }, { "name": "Hari", "email": "anbu@gmail.com", "phone": "9876543210", "dob": "/home/fraction/Music/agGrid-crudOperation/src/video2.mp4", "id": 5 } ] }Traté de pasar la URL del video usando el método del mapa, pero no me funcionó. cómo pasar varios videos a través del archivo json en reaccionar js
para obtener más detalles del código, consulte aquí
Cualquier sugerencia y respuesta se agradece de corazón gracias de antemano..
1 Respuestas
Responde la pregunta0
Adivinar que el almacenamiento local significa aquí es la carpeta del repositorio donde están presentes los videos.
La razón principal por la que no funciona es porque los videos no se sirven para su interfaz.
Sugeriría tener una configuración del lado del servidor y servir cada video con una URL. Luego, simplemente consulte esa URL en su interfaz, en lugar de incrustar todo el mp4 dentro de su interfaz.
La import myData from "../video.mp4" que funciona debido al paquete web simplemente incrustó todo el binario de video dentro de su interfaz javascript durante la compilación.
Para el caso de varios videos, la razón por la que no funciona es simplemente que no se require ni se import en su javascript, por lo que no están incrustados en su código de interfaz.
Si realmente desea que la interfaz lea sus archivos locales, puede usar la File System Access API y echar un vistazo a esta referencia , y esta es una guía completa de la API.
Si desea usar map() , puede cambiar el json a algo como esto, con dob como la URL de su video.
{ "users": [ { "id": 1, "name": "Hari", "email": "anbu@gmail.com", "phone": "9876543210", "dob": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" }, { "name": "Hari", "email": "anbu@gmail.com", "phone": "9876543210", "dob": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4", "id": 5 } ] }Luego, en su iframe, use la URL dob para el video
<iframe width="420" height="315" src={dob}> </iframe>