Mux y Astro

Mux es un servicio de medios alojado que proporciona infraestructura de streaming de video y analíticas de rendimiento para negocios de cualquier escala.

Cuando usas Mux para almacenar y alojar tu contenido de video, tendrás acceso a componentes de video nativos de Astro para Mux Player, un componente drop-in para añadir videos de Mux en tu proyecto de Astro, y Mux Uploader para subir videos a Mux desde tu sitio web. Estos componentes se integran perfectamente con Mux Data para rastrear el engagement y rendimiento de tus videos.

También puedes interactuar con tu contenido a través del Mux Node SDK.

Usar Mux en Astro

Las APIs y componentes web de Mux funcionan en Astro para comprimir y optimizar tus videos y streams para la web, adaptar la calidad de tu video a las condiciones de red, e integrar características adicionales como subtítulos, miniaturas, y analíticas. El Mux Node SDK soporta tanto Mux Data como la Mux Video API.

Requisitos previos

Un proyecto existente de Astro. Algunas características pueden requerir adicionalmente un adaptador instalado para renderizado del servidor bajo demanda.
Una cuenta de Mux. Si no tienes una cuenta, puedes registrarte en Mux usando el código ASTRO para recibir un crédito de $50.

Mux Player

En Astro, puedes usar el Mux Player con todas sus características como un componente nativo de Astro para reproducción de video optimizada y responsiva, y streams en vivo.

Mux Player proporciona una UI responsiva basada en las dimensiones del reproductor de video y el tipo de stream, vistas previas automáticas de miniaturas e imágenes de póster, y capacidades modernas de reproductor de video (p. ej. pantalla completa, picture-in-picture, Chromecast, AirPlay).

---
import { MuxPlayer } from "@mux/mux-player-astro";
---
<MuxPlayer
  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
  metadata={{ video_title: 'My Astro Video' }}
/>

Mux Player tiene soporte integrado para analíticas de Mux Data, y mostrará automáticamente el engagement de los visitantes y las métricas de calidad de video en tu dashboard una vez que tu video tenga reproducciones en tu sitio desplegado.

Instalación

Instala la versión de Astro de Mux Player usando tu gestor de paquetes preferido:

npm install @mux/mux-player-astro

pnpm add @mux/mux-player-astro

yarn add @mux/mux-player-astro

Mux Player también se puede usar en tu proyecto de Astro como:

un componente web (<mux-player> de @mux/mux-player )
un componente de React (<MuxPlayer /> de @mux/mux-player-react)
un embed web HTML (<iframe>)

Reproducir un video de Mux

Importa y usa el componente nativo de Astro <MuxPlayer /> directamente en tus archivos .astro como cualquier otro componente de Astro.

Necesitarás el playbackId de tu asset, que se puede encontrar en tu dashboard de Mux o recuperarse desde su ASSET_ID.

Todas las demás opciones para controlar el reproductor web de Mux (p. ej. ocultar o mostrar controles, elementos de estilo, desactivar cookies) son opcionales:

<MuxPlayer
  playbackId="FOTbeIxKeMPzyhrob722wytaTGI02Y3zbV00NeFQbTbK00"
  metadata={{
    video_title: 'Starlight by Astro',
  }}
  style={{
    display: 'block',
    aspectRatio: '16/9',
    backgroundColor: '#000',
    margin: '1rem 0 2rem',
  }}
  primaryColor="#f2ec3a"
  secondaryColor="#0caa09"
  accentColor="#6e1e99"
  defaultShowRemainingTime={true}
/>

Si tu playbackId pertenece a un stream en vivo en lugar de un video pregrabado bajo demanda, entonces Mux Player te permitirá personalizar aún más el reproductor con opciones como si habilitar o no el modo DVR.

<MuxPlayer
  playbackId="FOTbeIxKeMPzyhrob722wytaTGI02Y3zbV00NeFQbTbK00"
  metadata={{
    video_title: 'Starlight stream with Astro',
  }}
  streamType="live:dvr"
/>

Cada stream en vivo se graba y se guarda en Mux como un asset de video para futura reproducción bajo demanda.

Elemento de video de Mux

El elemento de video de Mux es un reemplazo drop-in del elemento HTML5 <video> que proporciona soporte del navegador para reproducción HLS, y tiene Mux Data configurado automáticamente para mostrar métricas de visitantes y rendimiento. Úsalo cuando no necesites o no quieras todas las características de Mux Player.

Para usar el componente web <mux-video>, primero instala mux-video usando tu gestor de paquetes preferido:

npm install @mux/mux-video

pnpm add @mux/mux-video

yarn add @mux/mux-video

Luego, puedes importar y renderizar el componente web en una etiqueta <script> en tu archivo .astro.

Necesitarás el playback-id de tu asset de video, que se puede encontrar en tu dashboard de Mux o recuperarse desde su ASSET_ID.

Todos los atributos del elemento HTML 5 <video> (p. ej. poster, controls, muted) están disponibles, así como controles adicionales del reproductor de video de Mux (p. ej. para proporcionar metadatos, controlar la resolución, desactivar cookies):

<script>import '@mux/mux-video'</script>

<mux-video
  playback-id="FOTbeIxKeMPzyhrob722wytaTGI02Y3zbV00NeFQbTbK00"
  metadata-video-title="Starlight by Astro"
  controls
  disable-tracking
></mux-video>

Mux Node SDK

El Mux Node SDK proporciona acceso autenticado a la Mux REST API desde TypeScript o JavaScript del lado del servidor. Esto te permite interactuar con tus assets y datos de Mux en el script del componente de tus archivos .astro.

Mientras que los componentes Mux Player y Mux Video no requieren autenticación y pueden reproducir cualquier video públicamente accesible dado su playbackId, conectarse a tus datos alojados en Mux vía el Node SDK requiere un token de acceso a la API de Mux.

Instalación

Instala el Mux Node SDK usando tu gestor de paquetes preferido:

npm install @mux/mux-node

pnpm add @mux/mux-node

yarn add @mux/mux-node

Acceso a la API de Mux Environment

Los tokens de API están vinculados a un Mux Environment específico, que es esencialmente un contenedor para tus videos y datos relacionados. Cuando te registras en Mux, se crea un Environment automáticamente para ti. Si has creado Environments adicionales, asegúrate de seleccionar el correcto antes de generar tus tokens. Desde ahí, puedes obtener tus tokens ID y SECRET y proporcionarlos al Node SDK. Estos tokens se pueden pasar a tus componentes de Astro como variables de entorno almacenadas en un archivo .env.

Esto te permitirá crear una instancia del Mux Node SDK para recuperar información sobre tus videos, crear nuevos assets, acceder a métricas y rendimiento en tiempo real, y más:

---
import Mux from "@mux/mux-node";

const mux = new Mux ({
  tokenId: import.meta.env.MUX_TOKEN_ID,
  tokenSecret: import.meta.env.MUX_TOKEN_SECRET,
})
---

Lee más sobre el uso de variables de entorno en tu proyecto de Astro, incluyendo la creación de un esquema type-safe para tus credenciales de Mux.

Recuperar datos de assets

Para obtener información sobre tu video para usar en tu proyecto de Astro, proporciona el ASSET_ID del video (disponible en el dashboard de Mux) a la función helper retrieve(). Esto te permitirá pasar valores tanto a tus componentes de Mux como a tu plantilla HTML, como el título o la duración del video:

---
import Mux from "@mux/mux-node";
import { MuxPlayer } from "@mux/mux-player-astro";

const mux = new Mux({
  tokenId: import.meta.env.MUX_TOKEN_ID,
  tokenSecret: import.meta.env.MUX_TOKEN_SECRET,
})

const ASSET_ID = "E01irAaN8c6dk1010153uC2mzst7RVbAdJJWtHECAHFvDo";
const asset = await mux.video.assets.retrieve(ASSET_ID);

const playbackId = asset.playback_ids?.find((id)=> id.policy=== "public")?.id;
const videoTitle = asset?.meta?.title;
const createdAt = Number(asset?.created_at);
const duration = Number(asset?.duration)

const date = new Date(createdAt * 1000).toDateString()
const time = new Date(Math.round(duration) * 1000).toISOString().substring(14, 19)
---
<h1>My Video Page</h1>
<p>Title: {videoTitle}</p>
<p>Upload Date: {date}</p>
<p>Length: {time}</p>

<MuxPlayer
  playbackId={playbackId}
  metadata={{video_title: videoTitle}}
/>

Consulta todas las propiedades de los assets en la documentación de la Mux Asset API.

Mux Uploader

Mux Uploader es una UI de subida de video completamente funcional y personalizable para tu sitio web de Astro. El componente nativo de Astro <MuxUpload /> te permite construir funcionalidad de subida de video en tu aplicación web.

Mux Uploader soporta tanto selección manual de archivos como arrastrar y soltar para subidas de archivos, pausa y reanudación opcional de subidas, y más.

Instalación

Instala la versión de Astro de Mux Uploader usando tu gestor de paquetes preferido:

npm install @mux/mux-uploader-astro

pnpm add @mux/mux-uploader-astro

yarn add @mux/mux-uploader-astro

Subir un video a Mux

Antes de subir un video, asegúrate de tener tus tokens de acceso a la API de Mux configurados. Con eso en su lugar, puedes usar la función create() del Mux Node SDK para iniciar una nueva subida de video:

---
import Layout from '../../layouts/Layout.astro';
import Mux from "@mux/mux-node";
import { MuxUploader } from "@mux/mux-uploader-astro";

const mux = new Mux({
  tokenId: import.meta.env.MUX_TOKEN_ID,
  tokenSecret: import.meta.env.MUX_TOKEN_SECRET
});

const upload = await mux.video.uploads.create({
  new_asset_settings: {
    playback_policy: ['public'],
    video_quality: 'basic'
  },
  cors_origin: '*',
});
---
<Layout title="Upload a video to Mux">
  <MuxUploader endpoint={upload.url} />
</Layout>

Personalizar el uploader

Puedes personalizar la funcionalidad y apariencia del <MuxUploader /> con atributos de componente adicionales. Además de dar estilo a tu elemento, esto te permite controlar opciones como la capacidad de pausar una descarga o establecer un tamaño máximo de archivo.

---
import { MuxUploader } from '@mux/mux-uploader-astro';
---

<MuxUploader
  endpoint="https://my-authenticated-url/storage?your-url-params"
  pausable
  maxFileSize={1000000000}
  chunkSize={8192}
  style={{
    '--progress-bar-fill-color': '#7e22ce',
    '--button-background-color': '#f0f0f0',
  }}
/>

Consulta la guía de personalización de Mux Uploader para más opciones.

Manejo de eventos para subidas

Mux Uploader proporciona una UI dinámica y rica en características que cambia según el estado actual de tu subida de medios. El comportamiento del uploader responde tanto a eventos impulsados por el usuario (p. ej. seleccionar un archivo, reintentar después de un error) como a eventos impulsados por el estado (p. ej. subida en progreso, subida completada exitosamente).

Puedes escuchar estos eventos y manejarlos en tu componente de Astro con scripts del lado del cliente. Un tipo MuxUploaderElement también está disponible.

---
import { MuxUploader } from '@mux/mux-uploader-astro';
---

<MuxUploader
  id="my-uploader"
  endpoint="https://my-authenticated-url/storage?your-url-params"
  pausable
/>

<script>
  import type { MuxUploaderElement } from '@mux/mux-uploader-astro';

  const uploader = document.getElementById('my-uploader') as MuxUploaderElement;

  uploader.addEventListener('uploadstart', (event) => {
    console.log('Upload started!', event.detail);
  });

  uploader.addEventListener('success', (event) => {
    console.log('Upload successful!', event.detail);
  });

  uploader.addEventListener('uploaderror', (event) => {
    console.error('Upload error!', event.detail);
  });

  uploader.addEventListener('progress', (event) => {
    console.log('Upload progress: ', event.detail);
  });
</script>

Recursos oficiales

Para la referencia completa de API y webhooks, guías de uso, e información sobre temas adicionales, como integración con un CMS, construcción de flujos de trabajo de video personalizados, y más, consulta:

Más guías de medios alojados

Contribuir Comunidad Patrocinar

Mux y Astro

Usar Mux en Astro

Requisitos previos

Mux Player

Instalación

Reproducir un video de Mux

Elemento de video de Mux

Mux Node SDK

Instalación

Acceso a la API de Mux Environment

Recuperar datos de assets

Mux Uploader

Instalación

Subir un video a Mux

Personalizar el uploader

Manejo de eventos para subidas

Recursos oficiales

Más guías de medios alojados

Cloudinary

ImageKit

Mux