javascript - Använd MUX-spelare (Video) i Angular 14/15

Mux är en video-API-tjänst som har sin egen spelare: MUX Player

Jag vill använda detta npm-paket i Angular 14/15 genom att importera det endast i en specifik komponent. JS bör bara laddas när denna komponent laddas.

Importera

De två metoderna för att använda tjänsten är:

  1. via en direkt <script src="https://unpkg.com/@mux/mux-player"></script> import i HTML (vilket jag kan göra i angulars index.html-fil. Detta innebär dock att skriptet laddas för alla, vilket inte är vad jag vill.
  2. npm-paket @mux/mux-player

Användning

Lägg till koden i en komponents HTML där skriptet eller npm-paketet har importerats.

<mux-player
stream-type="on-demand"
playback-id="FuJSYrK0014ec2LPnm11bzC2MAySAQPqA"
metadata-video-title="Tea and Cookies"
metadata-user-id="user-24601"
/>

Se till att även inkludera schemas: [CUSTOM_ELEMENTS_SCHEMA] i modulen (eller fristående komponent).

Problem

Angular kan vara lite konstigt med otypade paket. Jag tror att det här paketet använder TypeScript, men i alla fall ger importen av npm-paketet mig många fel. I praktiken laddas det inte eftersom Angular tar bort det när jag inte använder den importerade klassen i komponenternas ts-filer. Det här betyder att vid laddning ser jag: Kan inte hitta modul '../../../types/mux' eller dess motsvarande typdeklarationer och Egenskapen 'error' i typen 'MuxVideoElement' kan inte tilldelas samma egenskap i basklassen 'CustomVideoElement<HTMLVideoElement>'. Typen 'MediaError' saknar följande egenskaper från typen 'MediaError': MEDIA_ERR_ABORTED, MEDIA_ERR_DECODE, MEDIA_ERR_NETWORK, MEDIA_ERR_SRC_NOT_SUPPORTED

Vad jag har försökt

  1. För att bekräfta att <script>-importen och HTML-koden fungerar tillsammans, importerade jag skriptet i index.html, och detta tog bort alla fel och spelaren laddades korrekt.

  2. Jag har försökt importera npm-paketet import MuxPlayerElement från "@mux/mux-player";, och lagt till declare module "@mux/mux-player"; i typings.d.ts.

  3. Importera paketet till komponenten, och försökte deklarera @ViewChild template-refen som en MuxPlayerElement, för att komma runt eventuell tree-shaking.

Det finns en Angular-demo där det står "Den här spelaren? Det är en öppen bok." på https://www.mux.com/player, men detta resulterar i felet Only void and foreign elements can be self closed "mux-player". En enkel lösning på detta är att stänga taggen med </mux-player> istället för .../>

Svar #1

Uppdatera!

Mux adresserade Angular-stöd i 1.9.0

https://docs.mux.com/guides/player/releases#190

Instruktioner för användning:

  1. npm install @mux/mux-player
  2. lägg till schemas: [CUSTOM_ELEMENTS_SCHEMA] i modulen (eller fristående komponent)
  3. lägg till import "@mux/mux-player" i målkomponentens importer
  4. Använd som dokumenterat <mux-player ...></mux-player>

🎉