Uso de videos

Enlaces destacados

1. Documentación de Company XYZ sobre los ajustes de video
2. Documentación de Company XYZ sobre los ajustes de fondo de sección
3. Documentación de Shopify sobre cómo cargar y gestionar archivos
4. Documentación de Shopify sobre cómo añadir contenido multimedia a los productos
5. Documentación de Shopify sobre accesibilidad para temas

Videos útiles

Video de Shopify Academy: Personalizar su tienda

Video de Shopify Academy: Personalizar su tienda

Align admite videos en áreas multimedia independientes, fondos de secciones y banners, galerías de productos, presentaciones, promociones de navegación y diseños con contenido mixto. La mayoría de las ubicaciones utilizan los mismos controles básicos para la fuente del video, el encuadre, la reproducción, las imágenes de póster y las superposiciones, aunque los nombres de los ajustes pueden variar según el contexto.

Use esta guía para preparar videos y elegir ajustes prácticos en su tienda de Shopify. Para obtener información específica sobre los ajustes, consulte Ajustes de video y Ajustes de fondo de sección.

Elegir una fuente de video

La mayoría de las áreas de video de Align admiten uno de tres tipos de fuente.

1. Video alojado en Shopify
   1. Cargue o seleccione un archivo de los archivos de su tienda de Shopify.
   2. Use esta opción cuando necesite controlar la codificación, el bucle, el tamaño del archivo o la reproducción como fondo.
   3. Los videos alojados son necesarios para los tratamientos de video de fondo de secciones, banners y héroes.
2. YouTube
   1. Pegue la URL de la página del video, no el código de inserción.
   2. Use YouTube cuando el video ya esté allí y el alojamiento del proveedor satisfaga sus necesidades.
3. Vimeo
   1. Pegue la URL de la página del video, no el código de inserción.
   2. Use Vimeo cuando el video ya esté allí y el alojamiento del proveedor satisfaga sus necesidades.

Para consultar los pasos para cargar archivos, consulte documentación de Shopify sobre cómo cargar y gestionar archivos

Use una sola fuente prevista para cada área de video. Si hay disponible tanto un archivo alojado como una URL de servicio, prevalece el archivo alojado. Elimine la fuente que no utilice para evitar ambigüedades. Es posible que los cambios realizados en videos externos deban guardarse antes de que la vista previa del editor de temas de Shopify coincida con la tienda online.

Consejo

Los videos externos cargan primero la imagen de póster. El reproductor completo se carga solo después de una interacción o cuando un video de reproducción automática se vuelve visible.

Preparar archivos de video alojados

El peso del archivo afecta directamente al tiempo de carga, especialmente en dispositivos móviles. Shopify distribuye los videos alojados mediante transmisión adaptable (HLS), pero codificarlos con una tasa de bits menor aún puede mejorar PageSpeed y el rendimiento percibido. Los archivos de origen más pequeños siguen siendo importantes incluso cuando hay transmisión disponible.

Entender la tasa de bits

La tasa de bits es la cantidad de datos de video codificados por segundo.

1. Una tasa de bits más alta proporciona movimiento y detalles más nítidos, pero crea archivos más grandes y aumenta el peso de la página.
2. Una tasa de bits más baja crea archivos más ligeros que se inician más rápido, pero puede reducir los detalles en escenas oscuras o con mucho movimiento.

La mayoría de los codificadores muestran la tasa de bits en kbps o Mbps. Considérela un equilibrio entre el acabado visual y el rendimiento, en lugar de un único ajuste de calidad máxima.

Comenzar con estos objetivos de codificación

1. Uso general — Use aproximadamente 2500 kbps para videos independientes, clips de héroe, contenido multimedia de productos y fondos de secciones de ancho completo.
2. Ubicaciones pequeñas o compactas — Use aproximadamente 1000–1500 kbps para promociones de menú, banners de búsqueda, contenido multimedia del pie de página, mosaicos de collage y otros marcos estrechos.
3. Clips de fondo y ambientales — Mantenga los archivos cortos, adecuados para bucles y visualmente sencillos. Estos videos suelen reproducirse automáticamente sin sonido y deben sentirse ligeros, no cinematográficos.

Adapte la resolución al tamaño en el que se muestra el video. Un archivo maestro de 1080p o 4K mostrado en un banner pequeño añade ancho de banda sin mejorar el resultado visible.

Las superficies de reproducción automática, incluidos los fondos, los videos de presentaciones y los clips de héroe destacados, son especialmente sensibles al rendimiento. Use clips cortos, reproducción sin sonido y tasas de bits moderadas.

Usar videos en distintas ubicaciones

Los mismos conceptos de video se aplican a muchas ubicaciones del editor de Align. Estos grupos describen funciones comunes, no todas las secciones individuales.

1. Áreas de video independientes
   1. Incluyen secciones de video específicas y bloques de video en diseños mixtos.
   2. Admiten fuentes alojadas, YouTube y Vimeo.
   3. Funcionan bien para demostraciones, historias de marca, explicaciones y contenido editorial con subtítulos y botones opcionales.
2. Fondos de secciones y banners
   1. Añaden movimiento decorativo detrás de encabezados, banners, héroes y contenido promocional.
   2. Solo utilizan archivos alojados.
   3. Normalmente se reproducen automáticamente sin sonido, se repiten y ocultan los controles.
   4. Pueden admitir archivos de fondo independientes para computadoras y dispositivos móviles cuando los tamaños de pantalla necesitan recortes distintos.
3. Imágenes de productos
   1. Incluyen videos de la galería de productos en las páginas de productos y en áreas de productos destacados.
   2. Pueden incluir un video opcional al pasar el cursor por las tarjetas de producto cuando el contenido multimedia al pasar el cursor está habilitado.
   3. Las imágenes de póster y los controles de reproducción son especialmente útiles aquí porque los compradores esperan una reproducción deliberada.
4. Contenido multimedia de presentaciones y carruseles
   1. El video puede reemplazar o anular las imágenes de las diapositivas.
   2. Los clips normalmente se reproducen automáticamente cuando su diapositiva se activa, por lo que deben ser lo bastante cortos para sentirse intencionados dentro de la secuencia.
5. Superficies promocionales compactas
   1. Incluyen ubicaciones pequeñas con estilo de banner en la navegación, la búsqueda y otras áreas de alta densidad.
   2. Estas ubicaciones son las más sensibles a tasas de bits altas y tamaños de archivo grandes.

Para consultar los pasos para cargar contenido multimedia en la galería de productos y los tipos de contenido admitidos, consulte documentación de Shopify sobre cómo añadir contenido multimedia a los productos

Cuando un video parezca pesado, compruebe primero su ubicación. Un archivo que funciona bien en un héroe de ancho completo puede seguir siendo demasiado grande para un banner de menú o un marco del tamaño de una tarjeta.

Configurar la reproducción

Estos controles aparecen en secciones de video, bloques de video y otras superficies de Align basadas en contenido multimedia.

1. Reproducción automática
   1. Inicia la reproducción cuando el video entra en la vista y la pausa cuando sale de ella.
   2. Es mejor para clips ambientales cortos que complementan el contenido cercano.
   3. Requiere reproducción sin sonido durante el uso normal de la tienda online.
2. Bucle
   1. Repite el clip continuamente.
   2. Funciona bien para fondos y acentos de movimiento breves, pero puede distraer en videos narrados o basados en historias.
3. Silenciar
   1. Mantiene el audio desactivado hasta que el comprador lo habilita mediante los controles del reproductor.
   2. Los videos con reproducción automática están silenciados de forma predeterminada.
4. Mostrar controles del reproductor de video
   1. Muestra controles nativos o del proveedor para reproducir, pausar, desplazarse por el video, ajustar el volumen y usar la pantalla completa cuando sea compatible.
   2. Mantenga los controles visibles para explicaciones, demostraciones y videos que los compradores puedan querer volver a reproducir o inspeccionar detenidamente.
   3. Puede ocultar los controles para clips decorativos. En muchas superficies, la interacción mediante clic y teclado sigue funcionando cuando los controles están ocultos.

Nota

Si un video depende de detalles hablados, desactive la reproducción automática y mantenga los controles visibles para que los compradores puedan elegir cuándo escuchar.

Establecer imágenes de póster, relación de aspecto y ancho

1. Imagen de póster
   1. Proporciona un fotograma de vista previa opcional antes de que comience la reproducción.
   2. Es especialmente útil para videos alojados y para causar una buena primera impresión.
   3. Los videos externos utilizan las miniaturas del proveedor cuando no se establece un póster personalizado.
2. Relación de aspecto
   1. Controla la forma del marco visible en computadoras y, cuando está disponible, en dispositivos móviles.
   2. Use Predeterminada cuando las dimensiones de la fuente ya se adapten al diseño.
   3. Establezca una relación móvil independiente solo cuando los teléfonos necesiten un recorte distinto.
3. Ancho máximo
   1. Evita que un video se extienda más de lo previsto dentro de un área de contenido.
   2. Un valor de 0 utiliza todo el ancho disponible.

Elija un póster que coincida estrechamente con el recorte del video. Esto crea una transición más fluida cuando comienza la reproducción.

Añadir superposiciones y reproducción sin controles

Muchas áreas de video admiten una superposición de color o degradado y un ajuste de Estilo de superposición.

1. Mostrar cuando está pausado
   1. Muestra la superposición antes de la reproducción y después de que un comprador pause el video.
   2. Mantiene la reproducción visualmente limpia mientras el video está en marcha.
   3. Las pausas automáticas de la ventana gráfica en videos con reproducción automática no cuentan como pausas del comprador.
   4. Esta es la opción predeterminada para muchas superficies de video.
2. Mostrar siempre
   1. Mantiene la superposición visible tanto sobre el póster como sobre el video en reproducción.
   2. Úsela cuando el matiz forme parte del diseño, como en un tratamiento editorial o de marca.
   3. Esta opción desactiva los controles independientemente de Mostrar controles del reproductor de video.

Cuando los controles están ocultos, muchos videos alojados y de Vimeo aún pueden iniciarse desde el póster y pausarse o volver a reproducirse mediante clic o interacción con el teclado. YouTube mantiene su control de reproducción propio del proveedor en lugar de añadir un segundo icono de reproducción del tema.

Use superposiciones con un contraste de texto sólido. Consulte Ajustes de fondo de sección cuando el video aparezca detrás de encabezados, botones o texto principal. Para obtener recomendaciones más generales, consulte documentación de Shopify sobre accesibilidad para temas

Entender el comportamiento de rendimiento integrado

Align ayuda a mantener los videos cuidados sin cargar todos los reproductores de inmediato.

1. Carga prioritaria del póster
   1. Los videos externos muestran un póster antes de crear el reproductor activo.
   2. Los videos que no se reproducen automáticamente esperan a la interacción antes de cargar la inserción completa.
2. Reproducción automática según la ventana gráfica
   1. Cuando es posible, los reproductores de reproducción automática posponen su creación hasta que el video entra en la vista.
   2. La reproducción automática se pausa cuando el video sale de la vista.
3. Valores predeterminados más ligeros para videos alojados
   1. Los videos alojados que no se reproducen automáticamente evitan la precarga inmediata.
   2. Los videos de fondo posponen la carga de la fuente cuando corresponde y utilizan pósteres de imágenes de vista previa cuando están disponibles.
4. Actualizaciones fiables
   1. El comportamiento del video se restablece después de actualizar cuadrículas y recargar el editor, lo que evita reproductores obsoletos después de las actualizaciones.
5. Coordinación de tarjetas de producto
   1. Cuando una tarjeta de producto tiene un video principal y otro al pasar el cursor, solo se reproduce un clip a la vez.

Estos comportamientos son automáticos. Sus principales controles de rendimiento son el peso del archivo, la ubicación, la elección de reproducción automática y la duración del clip.

Ejemplos de situaciones

1. Bucle de fondo de héroe
   1. Use un clip ambiental alojado de 6–10 segundos, codificado a aproximadamente 2500 kbps o menos.
   2. Manténgalo silenciado y en bucle, refuerce la superposición para el texto y añada un archivo específico para móviles solo si el recorte de escritorio falla en los teléfonos.
2. Video de demostración de producto
   1. Use un video alojado o una URL de servicio con los controles visibles, la reproducción automática desactivada y un fotograma de póster personalizado.
   2. Elija una relación panorámica o predeterminada que coincida con el diseño de la galería.
3. Banner promocional de navegación
   1. Use un clip alojado compacto codificado a aproximadamente 1000–1500 kbps.
   2. Mantenga el movimiento sencillo, evite la narración y compruebe el rendimiento móvil porque el marco visible es pequeño.
4. Video editorial con matiz
   1. Use el estilo de superposición Mostrar siempre cuando un lavado de color forme parte del diseño.
   2. Mantenga el clip corto y confirme que el contraste del texto siga siendo sólido durante la reproducción.
5. Explicación externa
   1. Use una URL de página de YouTube o Vimeo con la reproducción automática desactivada, los controles activados y un póster personalizado si el recorte de la miniatura predeterminada es deficiente.
   2. Deje que la carga prioritaria del póster favorezca el rendimiento mientras los compradores deciden si desean reproducir el video.

Notas de uso

1. Codifique antes de cargar. La tasa de bits y la resolución importan más que depender únicamente de la transmisión.
2. Use archivos alojados para los fondos. YouTube y Vimeo funcionan para contenido multimedia independiente y basado en bloques, no para tratamientos decorativos de fondo.
3. Mantenga cortos los fondos en movimiento. Los videos de fondo y de presentaciones deben comunicar claramente sin sonido ni exigir atención.
4. Compruebe los dispositivos móviles por separado. Los archivos de fondo, las relaciones de aspecto y las superposiciones pueden comportarse de forma diferente en pantallas pequeñas.
5. Obtenga una vista previa después de guardar. Es posible que los cambios en videos externos no aparezcan por completo en el editor hasta que guarde y consulte la tienda online.