36 Como hacer un visor VIDEOS Y AUDIOS en el curso de LARAVEL (PHP y MySql) FullStack

Duración: 10 min
Módulo: 📄 Listado y Visualización de Archivos Lección 7 de 7
Anterior
35 Como hacer un visor de archivos DOCX y descargarlo en el curso de LARAVEL (PHP y MySql) FullStack
Siguiente
37 Como eliminar los archivos en directorio y base de datos de LARAVEL (PHP y MySql) FullStack

Descripción

📹 Lección 36: Cómo Hacer un Visor de Videos y Audios

Este capítulo finaliza la serie de implementación de visores de archivos dentro del sistema de gestión, enfocándose en archivos multimedia como videos (.mp4) y audios (.mp3).

🎬 Visor de Videos (MP4) con Video.js

Para la visualización de videos, el instructor utiliza la librería de código abierto Video.js, que proporciona un reproductor moderno y funcional:

  1. Integración de la Librería: Se utiliza el CDN (Content Delivery Network) de Video.js para incorporar sus estilos y scripts en la plantilla principal (admin) del proyecto [01:28].
  2. Lógica Condicional: Se añade un bloque elseif para la extensión mp4 [00:45].
  3. Etiqueta HTML: Se utiliza la etiqueta HTML <video> en el modal, asignándole:
    • Un ID (mi_video) y la clase (video-js) requeridos por la librería [02:30].
    • El atributo controls para mostrar los controles de reproducción [03:05].
  4. Ruta del Archivo: La ruta del video se especifica mediante la etiqueta <source>, utilizando el helper asset() de Laravel para apuntar a la ubicación del archivo [03:41].
  5. Ajuste de Estilo: El modal se configura con la clase modal-xl (extra-grande) y se ajusta la altura del reproductor para que ocupe todo el espacio disponible, ofreciendo una experiencia de visualización cómoda [04:49].

🎧 Visor de Audios (MP3)

Para los archivos de audio, la implementación es similar a la de video, pero se utiliza la etiqueta nativa de HTML para audio:

  1. Iconografía: Se añade la lógica de icono para la extensión mp3 en la tabla de listado [08:29].
  2. Lógica Condicional: Se agrega un bloque elseif para la extensión mp3 [08:46].
  3. Etiqueta HTML: Se utiliza la etiqueta <audio> dentro de un modal más pequeño (modal-dialog-centered):
    • Al igual que el video, se incluye la etiqueta <source> para establecer la ruta del archivo [09:05].
    • El atributo controls es esencial para que el usuario pueda reproducir y controlar el audio [09:34].

El instructor concluye la lección indicando que el siguiente paso del curso será implementar las acciones sobre los archivos (como editar, compartir, eliminar, y generar códigos QR) [09:59].

$0.00
Iniciar sesión para inscribirse

Lecciones

⚙️ Configuración e Inicialización
Lección 1. 01 Presentación al curso de Sistema de gestión de archivos con LARAVEL (PHP y MySql) FullStack 6 min
Lección 2. 02 Módulo ajuste de login personalizado con LARAVEL (PHP y MySql) FullStack 25 min
Lección 3. 03 Como instalar Animate.css en el curso con LARAVEL (PHP y MySql) FullStack 13 min
Lección 4. 04 Registro personalizado en el curso de LARAVEL (PHP y MySql) FullStack 14 min
Lección 5. 05 Como hacer inicio de sesión de forma automatica despues del registro LARAVEL (PHP y MySql) 8 min
🏗️ Modelos de Datos y Controladores
Lección 1. 06 Creación del modelo CARPETAS en el curso de LARAVEL (PHP y MySql) FullStack 15 min
Lección 2. 07 Creación del modelo ARCHIVOS en el curso de LARAVEL (PHP y MySql) FullStack 7 min
Lección 3. 08 Modelo entidad relación en el curso con LARAVEL (PHP y MySql) FullStack 9 min
Lección 4. 09 Crear controladores en el curso de sistema de gestión de archivos con LARAVEL (PHP y MySql) 10 min
📁 Gestión y Navegación de Carpetas
Lección 1. 10 Crear ventana modal para el registro de carpetas en el curso con LARAVEL (PHP y MySql) FullStack 8 min
Lección 2. 11 Crear carpetas en el curso de sistema de gestión de archivos con LARAVEL (PHP y MySql) FullStack 10 min
Lección 3. 12 Mostrar CARPETAS creadas en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 4. 13 Ingresar a las CARPETAS en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 5. 14 Crear SUBCARPETAS en el sistema de gestión de archivos en el curso de LARAVEL (PHP y MySql) 10 min
Lección 6. 15 Mostrar SUBCARPETAS creadas en el curso de LARAVEL (PHP y MySql) FullStack 10 min
Lección 7. 16 Mostrar solo las CARPETAS padre en el curso de LARAVEL (PHP y MySql) FullStack 8 min
🎨 Personalización y Edición de Carpetas
Lección 1. 17 Mostrar opciones de carpeta en el curso de Sistema de Gestión de archivos LARAVEL (PHP y MySql) 14 min
Lección 2. 18 Mostrar menú de la carpeta en el curso de sistema de gestión de archivos con LARAVEL- PHP y MySql 9 min
Lección 3. 19 Ventana modal para CAMBIAR NOMBRE a la carpeta en el curso de LARAVEL (PHP y MySql) FullStack 7 min
Lección 4. 20 Controller actualizar el nombre de la CARPETA en el curso de LARAVEL (PHP y MySql) FullStack 11 min
Lección 5. 21 Incorporar Tooltips en las CARPETA en el curso de LARAVEL (PHP y MySql) FullStack 5 min
Lección 6. 22 Menú opción de carpetas de colores en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 7. 23 Actualizar el color de la CARPETA en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 8. 24 Controller actualizar los 4 colores de las carpetas en el curso d LARAVEL (PHP y MySql) FullStack 5 min
Lección 9. 25 Controller colores de las SUBCARPETAS en el curso de LARAVEL (PHP y MySql) FullStack 15 min
📤 Carga y Almacenamiento de Archivos
Lección 1. 26 Como instalar Dropzone.js para subir archivos en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 2. 27 Uploads de archivos a las carpetas en el fomulario en el curso de LARAVEL (PHP y MySql) FullStack 16 min
Lección 3. 28 Uploads de archivos a las carpetas de forma PÚBLICA Y PRIVADO curso de LARAVEL (PHP y MySql) 10 min
Lección 4. 29 Como registrar archivos en la BASE de DATOS en el curso de LARAVEL (PHP y MySql) FullStack 9 min
📄 Listado y Visualización de Archivos
Lección 1. 30 Como mostrar los archivos de la BD en las carpetas en el curso de LARAVEL (PHP y MySql) FullStack 10 min
Lección 2. 31 Como listar los archivos de la BD en las carpetas en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 3. 32 Como poner iconos de cada archivos en las carpetas del curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 4. 33 Como hacer un visor de imágenes en las carpetas en el curso de LARAVEL (PHP y MySql) FullStack 11 min
Lección 5. 34 Como hacer un visor de PDF en las carpetas en el curso de LARAVEL (PHP y MySql) FullStack (2) 8 min
Lección 6. 35 Como hacer un visor de archivos DOCX y descargarlo en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 7. 36 Como hacer un visor VIDEOS Y AUDIOS en el curso de LARAVEL (PHP y MySql) FullStack 10 min
🗑️ Eliminación y Seguridad de Archivos
Lección 1. 37 Como eliminar los archivos en directorio y base de datos de LARAVEL (PHP y MySql) FullStack 18 min
Lección 2. 38 Módelo entidad relación USUARIOS - CARPETAS en el curso de LARAVEL (PHP y MySql) FullStack 9 min
Lección 3. 39 Mostrar solo carpetas de USUARIOS AUTENTICADOS en el curso de LARAVEL (PHP y MySql) FullStack 14 min
Lección 4. 40 Subir archivos de forma privada en el servidor en el curso de LARAVEL (PHP y MySql) FullStack 13 min
Lección 5. 41 Como mostrar archivos de manera privada en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 6. 42 Verificar auth Permisos para acceder al archivo en el curso de LARAVEL (PHP y MySql) FullStack 9 min
🔗 Opciones de Compartición y Privacidad
Lección 1. 43 Módulo compartir archivo de PRIVADO a PÚBLICO en el curso de LARAVEL (PHP y MySql) FullStack 11 min
Lección 2. 44 Diseño para compartir archivo de PRIVADO a PÚBLICO en el curso de LARAVEL (PHP y MySql) FullStack 13 min
Lección 3. 45 Cambiar estado del archivo PRIVADO a PÚBLICO en el curso de LARAVEL (PHP y MySql) FullStack 10 min
Lección 4. 46 Mover Archivo de Privado a Público en el Curso FullStack de Laravel (PHP y MySQL) 7 min
Lección 5. 47 Mover el archivo de PÚBLICO a PRIVADO en el curso de LARAVEL (PHP y MySql) FullStack 11 min
Lección 6. 48 Copiar vinculo para compartir de forma automática en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 7. 49 Generar Código QR para compartir el archivo en el curso de LARAVEL (PHP y MySql) FullStack 12 min
🧹 Mantenimiento del Sistema
Lección 1. 50 Como eliminar las carpetas en base de datos en el curso de LARAVEL (PHP y MySql) FullStack 15 min
Lección 2. 51 Como eliminar carpetas privadas y publicas en el curso de LARAVEL (PHP y MySql) FullStack 12 min
👑 Roles, Permisos y Panel de Control
Lección 1. 52 ROLES Y PERMISOS en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 2. 53 Roles del sistema para los permisos en el curso de LARAVEL (PHP y MySql) FullStack 13 min
Lección 3. 54 Permisos en las rutas y vistas en el curso de LARAVEL (PHP y MySql) FullStack 15 min
Lección 4. 55 Panel administrador y usuario con roles y permisos en el curso de LARAVEL (PHP y MySql) FullStack 16 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso