Cómo encontrar las URL de los vídeos en Squarespace y mucho más
Esta publicación es una colaboración con BeyondSpace.studio
Cómo publica Squarespace tus vídeos
Cuando subes vídeos a Squarespace, se reproducen en formato HLS en distintos tamaños. Esto permite a Squarespace ofrecer el vídeo ideal, adaptado a cada uno de tus visitantes. Bastante sencillo, ¿verdad? Pero si tienes curiosidad por saber cómo funciona este proceso o necesitas una herramienta para obtener fácilmente las URL de los vídeos, ¡sigue leyendo!
Introducción a la transmisión HLS
La transmisión HLS es un método muy utilizado para distribuir contenidos de vídeo a través de Internet. Funciona dividiendo el archivo de vídeo en fragmentos más pequeños y transmitiéndolos a través de HTTP. Esto permite la transmisión adaptativa, lo que significa que la calidad del vídeo puede variar en función de la velocidad de conexión a Internet del espectador y de las prestaciones de su dispositivo.
Cuando subes un vídeo a Squarespace —ya sea a través de un bloque de vídeo, un fondo de sección o una página de vídeo—, se procesa para generar varias versiones con diferentes velocidades de bits y resoluciones. Estas son:
360p
1080p
Este enfoque de resolución múltiple garantiza que los espectadores con conexiones más lentas puedan seguir disfrutando de una reproducción fluida sin problemas de almacenamiento en búfer.
Elemento de vídeo HTML5
Los vídeos se pueden reproducir en un navegador utilizando el código HTML <video> elemento. Cuando se especifica la fuente de vídeo (como .mp4, .webm, o .ogg) dentro de la etiqueta de vídeo, el navegador comienza a descargar el vídeo y empezará a reproducirlo una vez que se haya almacenado en el búfer una cantidad suficiente de datos.
Si un usuario avanza en el vídeo, la reproducción solo se reanudará una vez que se hayan descargado y reproducido todos los bytes anteriores.
Aquí tienes un ejemplo básico de la <video> elemento:
<video controls autoplay poster="video-thumb.jpg">
<source src="vid.ogg" type="video/ogg">
<source src="vid.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Puntos clave sobre el vídeo en HTML5:
Descarga de una única fuente: En el vídeo HTML5, solo se descarga una versión de la fuente de vídeo cada vez, independientemente del tamaño de la pantalla del usuario.
Gestión de recursos: Si las dimensiones de la fuente de vídeo superan el tamaño de la pantalla, el dispositivo debe eliminar píxeles para reproducir el vídeo con precisión. Esto puede provocar un mayor consumo de la CPU y de la batería.
Limitaciones de la red: Si la tasa de bits del vídeo supera el ancho de banda disponible de la red, la reproducción puede verse afectada, lo que provocaría interrupciones o retrasos.
Transmisión de vídeo de Squarespace
Cuando subes vídeos a Squarespace, estos se reproducen mediante streaming. Este proceso de streaming incluye los siguientes componentes clave:
La lista de reproducción principal (playlist.m3u8)
El archivo inicial que se envía al reproductor de vídeo es el archivo de manifiesto principal, al que normalmente se denomina «playlist.m3u8». Este archivo actúa como una «lista» que recoge todas las transmisiones disponibles para el vídeo. Cada versión de la transmisión aparece en la lista por separado, normalmente ordenadas de menor a mayor calidad.
#EXTM3U #EXT-X-VERSION:7 #EXT-X-STREAM-INF:BANDWIDTH=1124815,CODECS="avc1.64001e,mp4a.40.2",RESOLUTION=624x360 https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-624:360.m3u8?Expires=1727186774&Signature=OTgyNTRlMTQ4ODlhYmYzN2MzNzBlYTQ2MGU2OTc0ODdjZWVmMzJmMGM1MjU0OTgwNTFmYzM3MDUzYWNiMDNmNA #EXT-X-STREAM-INF:BANDWIDTH=3089710,CODECS="avc1.640028,mp4a.40.2",RESOLUTION=1870x1080 https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080.m3u8?Expires=1727186774&Signature=OTgyNTRlMTQ4ODlhYmYzN2MzNzBlYTQ2MGU2OTc0ODdjZWVmMzJmMGM1MjU0OTgwNTFmYzM3MDUzYWNiMDNmNA
Analicemos con más detalle las dos últimas líneas, donde se incluye la definición de la transmisión en Full HD (1080p)
#EXT-X-STREAM-INF:BANDWIDTH=3089710,CODECS="avc1.640028,mp4a.40.2",RESOLUTION=1870x1080 https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080.m3u8?Expires=1727186774&Signature=OTgyNTRlMTQ4ODlhYmYzN2MzNzBlYTQ2MGU2OTc0ODdjZWVmMzJmMGM1MjU0OTgwNTFmYzM3MDUzYWNiMDNmNA
En este ejemplo:
ANCHO DE BANDA: El ancho de banda necesario para reproducir esta retransmisión es de aproximadamente 3,09 Mbps.
CÓDECS: El códec de vídeo es
avc1, y el códec de audio esmp4a.RESOLUCIÓN: La resolución es de 1870 x 1080.
El enlace permite acceder al manifiesto de esta transmisión, en el que se detallan la duración y la ubicación de cada segmento.
Archivo de flujo único
Si descargamos el archivo de transmisión en Full HD desde el playlist.m3u8, podemos ver cómo se estructura y se transmite el vídeo para garantizar una reproducción en streaming eficiente.
En esencia, una transmisión de vídeo se genera dividiendo el vídeo en partes más pequeñas denominadas «segmentos». Estos segmentos suelen identificarse mediante un formato asociado a su codificación, como MPEG-TS. La organización y la denominación de estos segmentos se documentan en un archivo de manifiesto, normalmente con el .m3u8 extensión, p. ej.: mpegts-h264-1870:1080.m3u8
#EXTM3U #EXT-X-VERSION:7 #EXT-X-TARGETDURATION:8 #EXT-X-MEDIA-SEQUENCE:0 #EXT-X-PLAYLIST-TYPE:VOD #EXT-X-KEY:METHOD=AES-128,URI="https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/key/f062487d84f8136d025d52cb0ecf2f96765d86b4069015a9c1a7fa2344e17b9f",IV=0xe2969d19ecb6d750fa458786617c6f75 #EXTINF:8.066667, #EXT-X-BYTERANGE:1742208@0 https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080 #EXTINF:4.800000, #EXT-X-BYTERANGE:3025312@1742208 https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080 #EXTINF:3,766667, #EXT-X-BYTERANGE:1006368@4767520 https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080 #EXT-X-ENDLIST
A continuación se muestra el desglose de la retransmisión:
Información del encabezado:
#EXTM3U: Esta línea indica que el archivo es una lista de reproducción M3U ampliada.#EXT-X-VERSION:7: Indica la versión del formato de la lista de reproducción.#EXT-X-TARGETDURATION:8: Esto indica que la duración máxima de un segmento debe ser de 8 segundos.#EXT-X-MEDIA-SEQUENCE:0: Aquí se muestra el número de secuencia del primer segmento.#EXT-X-PLAYLIST-TYPE:VOD: Esto indica que la lista de reproducción es para vídeo a la carta.#EXT-X-KEY:...: Esta línea especifica el método de cifrado (AES-128)
Información por segmentos:
#EXTINF:8,066667,: Esta línea indica que el primer segmento tiene una duración de aproximadamente 8,07 segundos.#EXT-X-BYTERANGE:1742208@0: Esto especifica que el segmento se entregará como un rango de bytes que comienza desde el principio (0) y tiene una longitud de 1.742.208 bytes. La URL que aparece a continuación de esta línea apunta a los datos del segmento.
Lo siguiente
#EXTINFy#EXT-X-BYTERANGEEstas líneas proporcionan información sobre segmentos adicionales, incluyendo su duración y sus rangos de bytes.
Avance rápido
Como ya se ha mencionado, al trabajar con archivos MP4, para avanzar rápidamente es necesario descargar todo el contenido anterior. Sin embargo, en el caso de las transmisiones de vídeo, el reproductor puede solicitar de forma inteligente solo los segmentos necesarios.
Teniendo en cuenta la lista de reproducción m3u8 del segmento Full HD anterior: si te desplazas hasta el segundo t=13, el reproductor evalúa los segmentos de la siguiente manera:
Primer segmento: abarca desde t = 0 hasta aproximadamente t = 8,07 segundos.
Segundo segmento: abarca desde t = 8,07 hasta aproximadamente t = 12,87 segundos.
Dado que t = 13 segundos supera la duración total de los dos primeros segmentos, el reproductor detecta que debe acceder al tercer segmento:
Tercer segmento: Comienza en t = 12,87 segundos y continúa hasta que finaliza su duración.
Por lo tanto, el reproductor puede saltarse la descarga de los dos primeros segmentos (0-12,87 segundos) y solicitar inmediatamente el tercer segmento, lo que garantiza una reproducción más fluida sin almacenamiento en búfer innecesario. Esta gestión eficiente permite a los usuarios avanzar rápidamente y reduce al mínimo los tiempos de carga.
Transmisión adaptativa en Squarespace
El potencial de la transmisión adaptativa se pone de manifiesto al utilizar las funciones de vídeo de Squarespace. Gracias al protocolo HLS (HTTP Live Streaming), el reproductor de vídeo puede ajustar dinámicamente la calidad de la transmisión en función de las condiciones de la red en tiempo real.
Cuando un espectador empieza a ver un vídeo, el reproductor evalúa el ancho de banda disponible e inicia la reproducción con la resolución más adecuada. Si la velocidad de la red fluctúa, el reproductor puede cambiar sin interrupciones entre diferentes niveles de calidad.
Por ejemplo, cuando simulé la velocidad de una red 3G, el reproductor cambió automáticamente de 1080p a 360p para garantizar una reproducción fluida. Esta transición fluida permite a los espectadores disfrutar del contenido sin interrupciones.
Echa un vistazo a las capturas de pantalla que aparecen a continuación para ver cómo funciona este ajuste adaptativo de la calidad:
Modo sin limitación de velocidad: Se han cargado los segmentos en 1080p.
Velocidad de la red limitada a 3G: Los segmentos de 360p han sustituido a los de 1080p.
Limitaciones de la transmisión de vídeo en Squarespace
Los vídeos subidos a Squarespace pueden mostrarse automáticamente a 1080p o a 360p, dependiendo del dispositivo, el navegador y la conexión a Internet del usuario. Sin embargo, los usuarios no disponen de ninguna opción para seleccionar manualmente la resolución de visualización. Esta falta de control puede dar lugar a situaciones en las que el vídeo de fondo se vea borroso en los dispositivos móviles.
Es importante tener en cuenta que, aunque puedes subir vídeos en 4K a Squarespace, estos se redimensionarán y se mostrarán con una resolución máxima de 1080p.
Cada página web de Squarespace puede contener hasta 30 minutos de vídeo subido. Si necesitas más espacio de almacenamiento, suscríbete a un plan de Productos Digitales. Para obtener más información sobre los requisitos de vídeo de Squarespace, consulta esta página.
Si te interesa conocer otros métodos para subir vídeos a Squarespace, consulta este tutorial detallado del blog de Beyondspace.
Cómo acceder a la URL de la lista de reproducción de los vídeos de Squarespace
Ahora que ya tienes un conocimiento sólido sobre la transmisión de contenido en Squarespace, quizá entiendas por qué las URL de los vídeos subidos ya no aparecen en formatos tradicionales como MP4 u OGG. En su lugar, se proporcionan en formato HLS, lo que permite una transmisión adaptativa y un mejor rendimiento en diferentes condiciones de red.
Es posible que te encuentres en diversas situaciones en las que te resulte útil obtener la URL de tus vídeos. Por ejemplo, si quieres compartirla con compañeros o clientes para colaborar, disponer de acceso directo a la URL del vídeo HLS simplifica el proceso. Además, si eres desarrollador y deseas integrar vídeos en una aplicación o solución personalizada en tu página web de Squarespace, acceder a la URL HLS puede resultar increíblemente útil. Esta función aumenta tu flexibilidad y control sobre cómo y dónde se utiliza tu contenido de vídeo.
Optimizador de la biblioteca de recursos
Beyondspace ha presentado una herramienta gratuita llamada Asset Library Enhancer, que cuenta con una función única que te permite copiar las URL de los vídeos e imágenes subidos a Squarespace directamente desde el menú contextual. Esta mejora está diseñada para optimizar tu flujo de trabajo, facilitando más que nunca el acceso y el intercambio de tus archivos multimedia de forma fluida.
Asset Library Enhancer se gestiona ahora a través de Ground Control, lo que facilita la navegación y la personalización. Explora Ground Control
Cómo utilizar la nueva función «Copiar URL»:
En primer lugar, copia el fragmento de código del «Asset Library Enhancer» en la inserción del pie de página.
Accede a la biblioteca de recursos de tu sitio web en
/config/biblioteca-de-recursosdesde tu panel de control de Squarespace.Asegúrate de que la opción «Diseño de la biblioteca» esté configurada en «Lista».
Haz clic en el menú contextual de cada elemento de la fila para acceder al botón «Copiar URL»: para cada imagen o vídeo, haz clic en los tres puntos (menú contextual) situados junto al elemento para ver estas opciones.
Copiar URL de la imagen: Esto copiará en el portapapeles el enlace de la imagen y la URL de la miniatura del vídeo.
Copiar la URL del vídeo: esto copiará la URL real del vídeo al portapapeles. Ten en cuenta que, si el vídeo no se utiliza en ninguna parte de tu página, es posible que la URL del vídeo no sea válida. En tales casos, es posible que aparezca un mensaje indicando que el vídeo no se puede reproducir y sugiriéndote que lo incrustes en otro lugar para que la URL sea accesible.
Conclusión
HLS presenta una serie de ventajas con respecto al HTML5 nativo <video> etiqueta. Al ser responsiva por defecto, garantiza que se desperdicien menos datos al reproducir un vídeo demasiado grande para una pantalla pequeña. Además, gracias a sus capacidades adaptativas, es menos probable que las fluctuaciones en la velocidad de la red afecten a la calidad de reproducción.
Squarespace utiliza HLS en segundo plano. Cada respuesta de creación de vídeo incluye el m3u8 URL de la transmisión; por eso, la pequeña herramienta de Beyondspace puede ayudarte a obtener rápidamente las URL de las listas de reproducción de los vídeos y utilizarlas para tus propias necesidades.
