Mux & Astro

Mux est un service multimédia hébergé qui fournit une infrastructure de streaming vidéo et des statistiques de performances pour les entreprises de toutes tailles.

Lorsque vous utilisez Mux pour stocker et héberger votre contenu vidéo, vous aurez accès à des composants vidéo créés avec Astro pour Mux Player, un composant intégré pour ajouter des vidéos Mux dans votre projet Astro et Mux Uploader pour téléverser des vidéos sur Mux à partir de votre site web. Ces composants s’intègrent parfaitement à Mux Data pour suivre l’engagement et les performances de vos vidéos.

Vous pouvez également interagir avec votre contenu via le SDK Node de Mux.

Utilisation de Mux dans Astro

Les API et les composants web de Mux fonctionnent dans Astro pour compresser et optimiser vos vidéos et diffusions pour le web, adapter la qualité de votre vidéo aux conditions du réseau et intégrer des fonctionnalités supplémentaires telles que des sous-titres, des miniatures et des statistiques. Le SDK Node de Mux prend en charge les API Mux Data et Mux Video.

Prérequis

Un projet Astro existant. Certaines fonctionnalités peuvent également nécessiter l’installation d’un adaptateur pour le rendu de serveur à la demande.
Un compte Mux. Si vous n’avez pas de compte, vous pouvez vous inscrire sur Mux en utilisant le code ASTRO pour recevoir un crédit de 50$.

Mux Player

Dans Astro, vous pouvez utiliser Mux Player en tant que composant Astro natif pour une lecture vidéo optimisée et adaptative et des diffusions en direct.

Mux Player fournit une interface utilisateur adaptative reposant sur les dimensions du lecteur vidéo et le type de diffusion, des vignettes d’aperçu automatiques et des images de couverture, ainsi que des fonctionnalités de lecteur vidéo modernes (par exemple, plein écran, incrustation d’image, Chromecast, AirPlay).

---
import { MuxPlayer } from "@mux/mux-player-astro";
---
<MuxPlayer
  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
  metadata={{ video_title: 'Ma vidéo Astro' }}
/>

Mux Player dispose d’une prise en charge intégrée des statistiques de Mux Data et affichera automatiquement les mesures d’engagement des visiteurs et de qualité vidéo dans votre tableau de bord une fois que votre vidéo aura des vues sur votre site déployé.

Installation

Installez la version Astro de Mux Player en utilisant votre gestionnaire de paquets préféré :

npm install @mux/mux-player-astro

pnpm add @mux/mux-player-astro

yarn add @mux/mux-player-astro

Mux Player peut également être utilisé dans votre projet Astro en tant que :

un composant web (<mux-player> depuis @mux/mux-player )
un composant React (<MuxPlayer /> depuis @mux/mux-player-react)
contenu intégré (<iframe>)

Lire une vidéo à partir de Mux

Importez et utilisez le composant Astro natif <MuxPlayer /> directement dans vos fichiers .astro comme n’importe quel autre composant Astro.

Vous aurez besoin de l’identifiant de lecture (playbackId) pour votre ressource, qui peut être trouvé dans votre tableau de bord Mux ou récupéré à partir de son identifiant de ressource (ASSET_ID).

Toutes les autres options pour contrôler le lecteur web de Mux (par exemple, masquer ou afficher les contrôles, les éléments de style, désactiver les cookies) sont facultatives :

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

Si votre identifiant de lecture (playbackId) appartient à une diffusion en direct au lieu d’une vidéo préenregistrée à la demande, Mux Player vous permettra de personnaliser davantage le lecteur avec des options telles que l’activation ou non du mode DVR.

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

Chaque diffusion en direct est enregistrée et sauvegardée sur Mux en tant que ressource vidéo pour une future lecture à la demande.

Élément vidéo de Mux

L’élément vidéo de Mux remplace l’élément HTML5 <video>. Il prend en charge la lecture HLS par le navigateur et configure automatiquement Mux Data pour afficher les statistiques de fréquentation et de performance. Utilisez-le lorsque vous n’avez pas besoin de toutes les fonctionnalités de Mux Player.

Pour utiliser le composant web <mux-video>, installez d’abord mux-video à l’aide de votre gestionnaire de paquets préféré :

npm install @mux/mux-video

pnpm add @mux/mux-video

yarn add @mux/mux-video

Ensuite, vous pouvez importer et restituer le composant web dans une balise <script> dans votre fichier .astro.

Vous aurez besoin de l’identifiant de lecture (playbackId) pour votre ressource vidéo, qui peut être trouvé dans votre tableau de bord Mux ou récupéré à partir de son identifiant de ressource (ASSET_ID).

Tous les attributs de l’élément HTML 5 <video> (par exemple poster, controls, muted) sont disponibles, ainsi que des contrôles Mux supplémentaires pour le lecteur vidéo (par exemple pour fournir des métadonnées, contrôler la résolution, désactiver les cookies) :

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

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

SDK Node de Mux

Le SDK Node de Mux fournit un accès authentifié à l’API REST de Mux à partir de TypeScript ou JavaScript côté serveur. Cela vous permet d’interagir avec vos ressources et données Mux dans le script de composant de vos fichiers .astro.

Bien que les composants Mux Player et Mux Video ne nécessitent pas d’authentification et puissent lire n’importe quelle vidéo accessible au public en fonction de son playbackId, la connexion à vos données Mux hébergées via le SDK Node nécessite un jeton d’accès à l’API de Mux.

Installation

Installez le SDK Node de Mux à l’aide de votre gestionnaire de packages préféré :

npm install @mux/mux-node

pnpm add @mux/mux-node

yarn add @mux/mux-node

Accès à l’API des environnements de Mux

Les jetons d’API sont liés à un environnement Mux spécifique, qui est essentiellement un conteneur pour vos vidéos et les données associées. Lorsque vous vous inscrivez à Mux, un environnement est automatiquement créé pour vous. Si vous avez créé des environnements supplémentaires, assurez-vous de sélectionner le bon avant de générer vos jetons. À partir de là, vous pouvez obtenir votre identifiant et vos jetons secrets et les fournir au SDK Node. Ces jetons peuvent être transmis à vos composants Astro sous forme de variables d’environnement stockées dans un fichier .env.

Cela vous permettra de créer une instance du SDK Node de Mux pour récupérer des informations sur vos vidéos, créer de nouvelles ressources, accéder aux métriques et aux performances en temps réel, et plus encore :

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

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

En savoir plus sur l’utilisation des variables d’environnement dans votre projet Astro, y compris la création d’un schéma avec sûreté du typage pour vos informations d’identification à Mux.

Récupérer les données des ressources

Pour récupérer des informations sur votre vidéo à utiliser dans votre projet Astro, fournissez l’ASSET_ID de la vidéo (disponible dans le tableau de bord Mux) à la fonction d’assistance retrieve(). Cela vous permettra de transmettre des valeurs à la fois à vos composants Mux et à votre modèle HTML, comme le titre ou la durée de la vidéo :

---
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>Ma page vidéo</h1>
<p>Titre : {videoTitle}</p>
<p>Date de mise en ligne : {date}</p>
<p>Durée : {time}</p>

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

Consultez toutes les propriétés des ressources dans la documentation de l’API Asset de Mux.

Mux Uploader

Mux Uploader est une interface utilisateur de téléversement de vidéos entièrement fonctionnelle et personnalisable pour votre site web Astro. Le composant <MuxUpload /> créé avec Astro vous permet d’intégrer une fonctionnalité de téléversement de vidéos dans votre application web.

Mux Uploader prend en charge à la fois la sélection manuelle de fichiers et le glisser-déposer pour les téléversements de fichiers, la pause et la reprise facultatives des téléversements, et bien plus encore.

Installation

Installez la version Astro de Mux Uploader en utilisant votre gestionnaire de paquets préféré :

npm install @mux/mux-uploader-astro

pnpm add @mux/mux-uploader-astro

yarn add @mux/mux-uploader-astro

Téléverser une vidéo sur Mux

Avant de téléverser une vidéo, assurez-vous que vos jetons d’accès à l’API de Mux sont configurés. Une fois ces jetons en place, vous pouvez utiliser la fonction create() du SDK Node de Mux pour démarrer un nouveau téléversement de vidéo :

---
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="Téléverser une vidéo sur Mux">
  <MuxUploader endpoint={upload.url} />
</Layout>

Personnaliser le téléverseur

Vous pouvez personnaliser les fonctionnalités et l’apparence de <MuxUploader /> avec des attributs de composant supplémentaires. En plus de mettre en forme votre élément, cela vous permet de contrôler des options telles que la possibilité de suspendre un téléversement ou de définir une taille de fichier maximale.

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

<MuxUploader
  endpoint="https://mon-url-authentifiée/enregistrement?vos-paramètres-url"
  pausable
  maxFileSize={1000000000}
  chunkSize={8192}
  style={{
    '--progress-bar-fill-color': '#7e22ce',
    '--button-background-color': '#f0f0f0',
  }}
/>

Consultez le guide de personnalisation de Mux Uploader pour plus d’options.

Gestion des événements pour les téléversements

Mux Uploader offre une interface utilisateur dynamique et riche en fonctionnalités qui s’adapte à l’état actuel de votre téléversement multimédia. Le comportement du téléverseur réagit à la fois aux événements générés par l’utilisateur (par exemple, la sélection d’un fichier, une nouvelle tentative après une erreur) et aux événements liés à l’état (par exemple, téléversement en cours, téléversement terminé).

Vous pouvez écouter ces événements et les gérer dans votre composant Astro avec des scripts côté client. Un type MuxUploaderElement est également disponible.

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

<MuxUploader
  id="mon-televerseur"
  endpoint="https://mon-url-authentifiée/enregistrement?vos-paramètres-url"
  pausable
/>

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

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

  uploader.addEventListener('uploadstart', (event) => {
    console.log('Téléversement commencé !', event.detail);
  });

  uploader.addEventListener('success', (event) => {
    console.log('Téléversement réussi !', event.detail);
  });

  uploader.addEventListener('uploaderror', (event) => {
    console.error('Erreur lors du téléversement !', event.detail);
  });

  uploader.addEventListener('progress', (event) => {
    console.log('Progression du téléversement : ', event.detail);
  });
</script>

Ressources officielles

Pour obtenir la référence complète de l’API et du webhook, les guides d’utilisation et des informations sur des sujets supplémentaires, tels que l’intégration avec un CMS, la création de flux de travail personnalisés pour les vidéos, etc., veuillez consulter :

Plus de guides sur les médias hébergés

Contribuer Communauté Parrainer

Mux & Astro

Utilisation de Mux dans Astro

Prérequis

Mux Player

Installation

Lire une vidéo à partir de Mux

Élément vidéo de Mux

SDK Node de Mux

Installation

Accès à l’API des environnements de Mux

Récupérer les données des ressources

Mux Uploader

Installation

Téléverser une vidéo sur Mux

Personnaliser le téléverseur

Gestion des événements pour les téléversements

Ressources officielles

Plus de guides sur les médias hébergés

Cloudinary

Mux