HTML5 y proveedores personalizados
Reproduce archivos de vídeo alojados en tu servidor directamente en tu tienda y añade compatibilidad con cualquier plataforma de vídeo de terceros más allá de YouTube y Vimeo.
Disponible desde la v3.0.0
Descripción general
Product Video admite dos fuentes de vídeo adicionales que van más allá de las integraciones integradas de YouTube y Vimeo:
Los vídeos HTML5 te permiten enlazar directamente a archivos .mp4, .webm u .ogg alojados en cualquier lugar al que un navegador pueda acceder — tu propio servidor, una CDN o cualquier URL de archivo pública. El navegador gestiona la reproducción de forma nativa usando su reproductor <video> incorporado, sin necesidad de JavaScript de terceros.
Los proveedores personalizados te permiten insertar vídeo de cualquier plataforma o CDN que acepte una URL de incrustación. Registras el proveedor una sola vez — asignándole un nombre, su dominio y un tipo (archivo HTML5 o incrustación mediante iframe) — y a partir de ese momento el módulo reconoce las URLs de ese dominio y las incrusta correctamente en cualquier producto.
Ambos tipos de fuente se integran completamente con las ubicaciones de visualización del módulo (galería de imágenes, panel lateral, pestañas, listados de productos) y con tus controles de permisos existentes, como restringir la reproducción a clientes registrados o a grupos de clientes específicos.
Configuración
Ajustes HTML5
Ve a Módulos > Gestor de módulos > Product Video > Configurar y abre la pestaña Ajustes HTML5.
Todos los ajustes de esta pestaña se aplican únicamente a los archivos de vídeo HTML5. YouTube y Vimeo no se ven afectados.
| Campo | Valores | Por defecto | Descripción |
|---|---|---|---|
| Tamaño de portada del vídeo | Cualquier preajuste de tamaño de imagen definido en tu tema | medium | El tamaño de imagen del producto usado como fotograma de póster que se muestra antes de que el vídeo se reproduzca. Elige el tamaño que coincida con la imagen de producto principal de tu tema (habitualmente large o home_default). |
| Reproducción automática al cargar el vídeo | Activado / Desactivado | Activado | Inicia la reproducción automáticamente en cuanto el reproductor se carga en la página. |
| Mostrar los controles del vídeo | Activado / Desactivado | Activado | Muestra la barra de controles nativa del navegador — reproducir, pausar, avanzar, volumen y pantalla completa. |
| Reproducir vídeos en silencio | Activado / Desactivado | Desactivado | Reproduce sin sonido de forma predeterminada. La mayoría de navegadores requieren audio silenciado para que la reproducción automática funcione. |
| Reproducción en bucle | Activado / Desactivado | Activado | Reinicia el vídeo desde el principio cuando termina. |
Si activas la Reproducción automática, debes activar también Reproducir vídeos en silencio. Los navegadores modernos bloquean la reproducción automática con audio a menos que el vídeo esté silenciado.
Proveedores personalizados
Los proveedores personalizados se gestionan desde una página dedicada del Back Office, independiente de la configuración principal del módulo.
Ve a Catálogo > Proveedores de vídeo en la barra lateral del Back Office. Esta página muestra todos los proveedores registrados, incluidas las entradas integradas de YouTube y Vimeo.
Haz clic en Añadir nuevo proveedor para abrir el formulario del proveedor.
| Campo | Obligatorio | Descripción |
|---|---|---|
| Nombre del proveedor | Sí | Una etiqueta que eliges para tu propia referencia — por ejemplo "Wistia", "Dailymotion" o "Mi CDN". Los clientes nunca ven este nombre. |
| Tipo de proveedor | Sí | Vídeo HTML5 para URLs de archivos de vídeo directos; Otro iframe para plataformas que usan iframes de incrustación. |
| Dominio del proveedor | Sí | El dominio (sin http:// ni https://) de la plataforma — por ejemplo fast.wistia.net o cdn.mysite.com. Cuando añades un vídeo a un producto, el módulo compara la URL con este dominio para seleccionar el proveedor correcto. |
| Miniatura del proveedor | Sí (al crear) | Una imagen de miniatura predeterminada usada para todos los vídeos de este proveedor. Puedes sustituirla por vídeo al añadir vídeos a productos individuales. |
| Portada del vídeo | Sí para el tipo HTML5 | Una imagen de portada (fotograma de póster) predeterminada que se muestra antes de que se reproduzca un vídeo HTML5. Solo se aplica a los proveedores de tipo HTML5. |
Añade únicamente proveedores de iframe en los que confíes. Las incrustaciones de iframe de un proveedor registrado se procesan sin filtrado adicional.
Tras guardar, se te devuelve a la página de detalle del proveedor donde puedes actualizar las imágenes o editar el nombre y el dominio. Los campos Nombre del proveedor y Dominio del proveedor son de solo lectura para las entradas integradas de YouTube (ID 1) y Vimeo (ID 2).
Cómo funciona
Reproducción de vídeo HTML5
Cuando un producto tiene asignado un vídeo HTML5, el módulo renderiza un elemento <video> nativo con la URL como fuente. El fotograma de póster (la imagen estática que se muestra antes de la reproducción) se genera a partir de la imagen del producto usando el preajuste de Tamaño de portada del vídeo que hayas configurado. No se carga ningún script de reproductor de terceros — la reproducción la gestiona íntegramente el navegador.
Los ajustes HTML5 (reproducción automática, controles, silencio, bucle) se aplican a todos los vídeos HTML5 de tu tienda, incluidos los vídeos asignados a través de proveedores personalizados configurados como tipo HTML5.
Los vídeos HTML5 también pueden generar microdatos Schema.org para el SEO. Cuando un cliente reproduce un vídeo HTML5, el módulo captura los metadatos del vídeo y los almacena para la salida de datos estructurados. Esto requiere el Token de vídeos HTML5 que se encuentra en la sección Microdatos y SEO de la configuración del módulo.
Incrustación de proveedores iframe
Para los proveedores personalizados de tipo Otro iframe, el módulo envuelve la URL del vídeo en una etiqueta <iframe> usando el ancho y alto de vídeo estándar que hayas configurado. La URL que introduces al asignar un vídeo a un producto debe ser la URL de incrustación directa, no la URL de la página donde aparece el vídeo.
Por ejemplo, para Wistia usarías una URL como https://fast.wistia.net/embed/iframe/abc123, no la URL de visualización https://wistia.com/....
Coincidencia de dominios
Cuando asignas una URL de vídeo a un producto, el módulo compara el dominio de la URL con todos los dominios de proveedores registrados. La primera coincidencia determina qué proveedor gestiona la incrustación. Si ningún proveedor personalizado coincide, el módulo recurre a comprobar los dominios de YouTube y Vimeo y, a continuación, trata la URL como un archivo HTML5 simple.
Imágenes del proveedor
Cada proveedor puede tener dos imágenes:
- Miniatura — se usa en la lista de proveedores del Back Office y como miniatura de vídeo alternativa para los vídeos de ese proveedor que no tienen una miniatura subida individualmente.
- Portada — se usa como fotograma de póster del vídeo HTML5 para los proveedores de tipo HTML5, si no se ha subido una portada individual para un vídeo específico.
Las imágenes se almacenan en múltiples tamaños según los tipos de imagen configurados en tu tienda, de modo que se renderizan correctamente en todos los tamaños de visualización.
Ejemplos de uso
Ejemplo: Añadir Wistia como proveedor iframe
Tu equipo de marketing usa Wistia para demos de productos de marca. En Catálogo > Proveedores de vídeo, haz clic en Añadir nuevo proveedor. Establece el Nombre del proveedor como "Wistia", el Tipo de proveedor como "Otro iframe" y el Dominio del proveedor como fast.wistia.net. Sube el logotipo de Wistia como miniatura. Guarda. Ahora, cuando añadas un vídeo a un producto y pegues una URL de incrustación de Wistia, el módulo la reconocerá y renderizará el iframe automáticamente.
Ejemplo: Archivos MP4 autoalojados en una CDN
Tu tienda vende software con vídeos tutoriales almacenados en videos.yourcdn.com. Añade un proveedor personalizado con el Tipo de proveedor configurado como "Vídeo HTML5" y el Dominio del proveedor configurado como videos.yourcdn.com. Sube una imagen de portada representativa. Cuando asignas una URL de vídeo como https://videos.yourcdn.com/tutorial-product-1.mp4 a un producto, el módulo renderiza un reproductor <video> nativo usando tus ajustes HTML5 (reproducción automática, bucle, controles, silencio).
Ejemplo: Desactivar la reproducción automática para vídeos de demostración
Vendes productos físicos con vídeos de fondo ambiental — quieres que se reproduzcan en silencio en bucle sin necesidad de un clic. Ve a Ajustes HTML5 y activa Reproducción automática al cargar el vídeo, Reproducir vídeos en silencio y Reproducción en bucle. Desactiva Mostrar los controles del vídeo si quieres un aspecto limpio sin controles. Todos los vídeos HTML5 de tu tienda se reproducirán en silencio al cargar.
Notas importantes
- Los proveedores personalizados que añadas no pueden eliminarse si hay vídeos todavía asignados a ellos en productos. Primero elimina los vídeos de los productos y luego borra el proveedor.
- Las entradas de los proveedores integrados YouTube (ID 1) y Vimeo (ID 2) no pueden editarse ni eliminarse. Puedes subir una imagen de miniatura personalizada para reemplazar sus miniaturas generadas automáticamente.
- Las miniaturas de los proveedores personalizados no se generan automáticamente — debes subir una imagen al crear el proveedor, o individualmente al añadir vídeos a los productos.
- El comportamiento de la reproducción automática de vídeo HTML5 depende de la configuración del navegador del cliente. Algunos navegadores anulan la reproducción automática silenciada. Esto es una política del navegador, no una limitación del módulo.
- Las cabeceras CORS de tu CDN de vídeo deben permitir el dominio de tu tienda. Si tu CDN no envía la cabecera
Access-Control-Allow-Origincorrecta, el vídeo no se reproducirá de origen cruzado. Esto es un problema de configuración del servidor fuera del control del módulo. - Si tu tienda funciona en modo multishop, los proveedores personalizados se comparten entre todas las tiendas — no están delimitados por tienda.
Resolución de problemas
| Problema | Solución |
|---|---|
| El vídeo HTML5 no se reproduce automáticamente | Activa Reproducir vídeos en silencio en los Ajustes HTML5. Los navegadores requieren audio silenciado para la reproducción automática. |
| La imagen de portada aparece con el tamaño incorrecto o borrosa | Cambia el Tamaño de portada del vídeo para que coincida con el tamaño de imagen que usa tu tema para la imagen de producto principal (habitualmente large o home_default). |
| El vídeo del proveedor personalizado muestra un reproductor en blanco o roto | Verifica que la URL sea la URL de incrustación directa, no la URL de la página del vídeo. Para los proveedores iframe, la URL debe ser el endpoint incrustable que proporciona tu plataforma. |
| El vídeo del proveedor personalizado se reproduce pero no tiene miniatura | Las miniaturas de los proveedores personalizados no se generan automáticamente. Sube una imagen de miniatura en la página de edición del proveedor, o sube una por vídeo en la página de edición del producto. |
| El archivo de vídeo en la CDN no se reproduce | Tu CDN debe enviar cabeceras CORS que permitan el dominio de tu tienda. Contacta con tu proveedor de CDN para activar Access-Control-Allow-Origin para tu tienda. |
| El campo de dominio del proveedor aparece en gris | Los proveedores integrados de YouTube y Vimeo (IDs 1 y 2) tienen campos de solo lectura. No puedes cambiar su dominio ni su nombre — solo sus imágenes de miniatura. |
Preguntas frecuentes
¿Puedo usar proveedores personalizados junto con YouTube y Vimeo en el mismo producto?
Sí. Un único producto puede tener vídeos de cualquier combinación de proveedores — YouTube, Vimeo, HTML5 y cualquier proveedor personalizado que hayas registrado. Cada vídeo se incrusta según las reglas de su propio proveedor.
¿Qué URL debo pegar al añadir un vídeo de un proveedor iframe a un producto?
Usa la URL de incrustación directa — la que normalmente pondrías dentro de una etiqueta <iframe src="...">. No uses la URL de la página donde ves el vídeo. La mayoría de plataformas ofrecen una opción dedicada de "URL de incrustación" o "compartir incrustación". Por ejemplo, Wistia muestra una URL fast.wistia.net/embed/... en sus opciones de incrustación.
¿Los vídeos HTML5 generan datos estructurados Schema.org como YouTube y Vimeo?
Sí, pero requiere un paso adicional. Activa la generación de microdatos en la sección Microdatos y SEO y asegúrate de que el Token de vídeos HTML5 esté configurado. El módulo captura los metadatos del vídeo cuando un cliente lo reproduce y los almacena para la salida Schema.org. Los metadatos de YouTube y Vimeo se obtienen de sus APIs; los metadatos HTML5 se capturan mediante un mecanismo de front-end activado en la primera reproducción.
¿Los clientes en dispositivos móviles verán los controles del reproductor HTML5?
El navegador renderiza los controles usando su interfaz de vídeo nativa, por lo que el aspecto depende del navegador y el dispositivo del cliente. En la mayoría de navegadores móviles, los controles aparecen como una superposición sobre el vídeo. Puedes ocultar los controles completamente desactivando Mostrar los controles del vídeo en los Ajustes HTML5 — útil para vídeos de fondo o ambientales.
¿Cómo elimino un proveedor personalizado que ya no necesito?
Primero elimina todos los vídeos asignados a productos que usen ese proveedor. Luego ve a Catálogo > Proveedores de vídeo, abre el proveedor y elimínalo. Si hay vídeos de ese proveedor todavía asignados a productos, la eliminación fallará.
¿Puedo rellenar automáticamente el nombre del proveedor a partir del dominio?
Si abres el formulario Añadir proveedor sin escribir un nombre pero con un dominio ya introducido en el campo de dominio, el módulo genera automáticamente un nombre de proveedor eliminando los sufijos comunes (.com, .net, etc.) del dominio y escribiéndolo con mayúscula inicial. Puedes editar el nombre en cualquier momento.