web_video Shortcode

El web_video representa el componente de vídeo.

El bloque de vídeo de Gutenberg comparte su renderizador y sus assets condicionales. El shortcode público sigue disponible cuando se desactiva la administración del Page Builder. El tipo de fuente seleccionado tiene prioridad sobre los campos de URL sin usar. Las URL del proveedor deben pertenecer a YouTube o Vimeo, y se rechazan las URL que contienen credenciales.

Los campos de formato autoalojado también aceptan un ID de archivo adjunto público de la Biblioteca de medios del tipo de vídeo correspondiente; video_thumbnail acepta un ID de archivo adjunto de imagen. Esas referencias resuelven sus URL actuales en el momento del renderizado. Una etiqueta accesible vacía sigue el título actual del vídeo de la biblioteca seleccionado. Los medios faltantes, privados, en la papelera o de tipo incorrecto se omiten. Las cachés del frontend aún deben caducar tras los cambios de medios.

Los atributos siguientes coinciden con los controles actuales del Page Builder y con la salida pública. Usa la sintaxis sin procesar solo para contenido revisado que no pueda mantenerse mediante los controles visuales.

Uso

[web_video]

Para un bucle de característica de producto silencioso que comienza cuando al menos la mitad del vídeo entra en el área de visualización y conserva las dimensiones del vídeo de origen:

[web_video video_type="self-hosted" video_mp4_url="https://example.com/feature.mp4" video_autoplay_viewport="yes" video_loop="yes" video_controls="" video_aspect_ratio="original"]

Las políticas de reproducción automática del navegador exigen que los vídeos con reproducción automática estén silenciados. El shortcode lo hace automáticamente para la reproducción automática inmediata, al entrar en el área de visualización, tras la primera interacción y al pasar el ratón. Deja Fullscreen play toggle desactivado cuando el vídeo deba mostrarse dentro de la página.

Atributos

Personalizar la hoja de estilos

Ve a Settings → POM Theme → Advanced → Custom CSS, expande Shortcode CSS assetsy abre Video. La comparación muestra el CSS legible generado por el tema actual junto a la fuente editable. Al guardar se crea un reemplazo optimizado por sitio para la hoja de estilos web-video existente; al revertir se restaura el asset video.min.css actual.

El reemplazo solo cambia el CSS. No cambia web_video, la resolución del proveedor y de la fuente, el marcado en línea o a pantalla completa, la reproducción, los controles, los modos de reproducción automática, el bucle, las proporciones de aspecto, los pósters, los botones, las etiquetas de accesibilidad ni las condiciones de solicitud. Los scripts web_video y web-jarallax-video existentes, sus dependencias, el comportamiento de VideoWorker, la pantalla completa modal y los assets del reproductor personalizado permanecen sin cambios. Las páginas sin contenido de vídeo siguen sin cargar ninguno de estos assets del módulo.

Verificación

Comprueba web_video con el medio previsto, un tamaño adaptable adecuado y cualquier texto alternativo o transcripción necesarios. Para un vídeo de característica de producto en línea, desactiva los controles, activa el modo de reproducción automática previsto y el bucle, y verifica su tamaño antes y después de que se carguen los metadatos. Prueba Original video ratio con una fuente autoalojada que no sea 16:9 y Custom con los valores de anchura y altura. Al usar el botón de reproducción a pantalla completa, inspecciona el enlace y confirma que su aria-label describe la acción del vídeo.

Tras editar la hoja de estilos, verifica que la reproducción en línea y la pausa siguen funcionando, abre y cierra la presentación a pantalla completa con su botón y Escape, y confirma que los scripts configurados permanecen sin cambios. Una página sin web_video no debe cargar ni la hoja de estilos de vídeo ni su módulo ni los scripts de Jarallax Video.

Elige el reproductor autoalojado de forma global en Settings → POM Theme → Design system → Components → Video player. Default player conserva el reproductor del tema existente para medios directos y URL lógicas de Pomatio Video Hosting. Custom player (Video.js 10) puede usar la piel estándar de Video.js o la piel personalizada del tema. La piel personalizada aplica los controles globales y los colores de acento a los iconos, las etiquetas, el progreso y los estados seleccionados. Su color de fondo opcional está vacío de forma predeterminada y, cuando se define, rellena la barra de controles completa y sus menús. Esos campos de color están ocultos mientras se selecciona la piel predeterminada. Ambas pieles de Video.js permiten las opciones de control individuales anteriores; esos campos de control granulares están ocultos en el componente del Page Builder mientras está seleccionado el reproductor predeterminado. La entrada del reproductor personalizado se carga solo en páginas que muestran un reproductor personalizado, una publicación de vídeo alojado o una lista de reproducción alojada. Su tiempo de ejecución HLS se solicita por separado solo cuando se requiere reproducción HLS adaptativa; las fuentes directas MP4, WebM y OGV no descargan ese tiempo de ejecución más grande. Las nuevas generaciones alojadas siempre incluyen la versión progresiva estándar independientemente de Scroll. Si una URL lógica alojada más antigua aún no ha completado ese relleno, el shortcode usa temporalmente su transporte HLS privado para que el vídeo siga siendo reproducible en lugar de enviar una URL no disponible al reproductor heredado.

Para una URL lógica de Pomatio Video Hosting, confirma que la reproducción funciona con el reproductor global seleccionado y que no aparece ninguna URL permanente de CloudFront o de almacenamiento en el shortcode guardado. La página renderizada sigue siendo apta para la caché de página completa porque contiene solo la identidad lógica y estable del asset; Pomatio Video Hosting comprueba el acceso actual y suministra credenciales de entrega de corta duración cuando comienza la reproducción. Con el reproductor personalizado, verifica también el avance, la calidad adaptativa cuando hay varias versiones disponibles, los controles configurados, la entrada y salida de pantalla completa y una vista previa de miniatura compacta al señalar la línea de tiempo. La pantalla completa conserva el contenedor completo del reproductor y su piel configurada; los navegadores sin pantalla completa de contenedor usan su presentación de vídeo nativa. El HLS alojado comienza con calidad Auto , limita la versión a la anchura física del reproductor incluida la proporción de píxeles de la pantalla y reduce la calidad cuando el ancho de banda medido no puede mantenerla. Para la reproducción HLS en bucle, el reproductor conserva los segmentos de búfer de respaldo reutilizables entre cambios de calidad cuando el navegador lo permite, reduciendo descargas repetidas evitables sin garantizar que el navegador retenga todos los segmentos. La reproducción automática, la reproducción automática al entrar en el área de visualización, la reproducción automática al pasar el ratón, el bucle, la carga tras la primera interacción, el póster y el botón de reproducción a pantalla completa mantienen su comportamiento a nivel de shortcode. Cuando se activa cualquier modo de reproducción automática y un póster, el póster es el único contenido visible del reproductor hasta que comienza la reproducción; el reproductor no muestra ningún mensaje de carga ni indicador giratorio encima.