Cargar un vídeo desde assets (local) usando Expo React Native

Tiempo de lectura: 2 minutos

Para cargar un video desde un archivo local almacenado en assets/videos/video_1.mp4, puedes usar el componente Video de la librería expo-av.

1. Instala las dependencias necesarias

Si no tienes la librería expo-av instalada, puedes añadirla a tu proyecto con:

expo install expo-av

2. Organiza los archivos en tu proyecto

Guarda tu archivo de video en assets/videos/video_1.mp4. Asegúrate de que esta carpeta está accesible desde tu proyecto.

3. Código de ejemplo

Puedes usar el componente Video de expo-av para cargar y reproducir el archivo de video:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Video } from 'expo-av';

const App = () => {
  const videoPath = require(`./assets/videos/video_1.mp4`);

  return (
    <View style={styles.container}>
      <Video
        source={videoPath}
        style={styles.video}
        resizeMode="contain"
        useNativeControls
        isLooping
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
  video: {
    width: '100%',
    height: 300, // Ajusta la altura según sea necesario
  },
});

export default App;

Detalles importantes

1. Carga dinámica del video:
   • Usa require para acceder a videos estáticos en tu proyecto. El valor del ID debe estar definido en tiempo de desarrollo, ya que require no admite rutas dinámicas puramente dinámicas.
   • Si necesitas cargar videos dinámicos basados en un parámetro (por ejemplo, ID obtenido de una API), deberás configurar un esquema de carga diferente usando Asset.fromModule o un servidor.
2. Videos más grandes: Si los videos son demasiado grandes, considera:
   • Reducir el tamaño del archivo para evitar que la aplicación crezca demasiado.
   • Almacenarlos en un servidor y cargarlos dinámicamente desde allí.
3. Previsualización: Para mejorar la experiencia del usuario, puedes añadir una imagen estática de vista previa con el atributo posterSource.