Mux offers a video API service with its own player: MUX Player
I am interested in integrating this npm package specifically into a component in Angular 14/15. The JavaScript should only be loaded when this particular component is rendered.
Integration
There are two ways to utilize the Mux service:
- By directly importing the script using
in the HTML (which can be done in angular's<script src="https://unpkg.com/@mux/mux-player"></script>index.htmlfile), but this loads the script for all users which is not ideal. - Using the npm Package
@mux/mux-player
Usage
Add the following code to an HTML component where the script or npm package has been imported:
<mux-player
stream-type="on-demand"
playback-id="FuJSYrK0014ec2LPnm11bzC2MAySAQPqA"
metadata-video-title="Tea and Cookies"
metadata-user-id="user-24601"
/>
Make sure to include
schemas: [CUSTOM_ELEMENTS_SCHEMA]Challenge
Angular can have difficulty with untyped packages. It seems that this package uses TypeScript, however, when I import the npm package, I encounter numerous errors. Essentially, Angular removes it during tree-shaking because I'm not using the imported class in the component's TypeScript. As a result, upon loading, I see:
Cannot find module '../../../types/mux' or its corresponding type declarationsProperty 'error' in type 'MuxVideoElement' is not assignable to the same property in base type 'CustomVideoElement<HTMLVideoElement>'. Type 'MediaError' is missing the following properties from type 'MediaError': MEDIA_ERR_ABORTED, MEDIA_ERR_DECODE, MEDIA_ERR_NETWORK, MEDIA_ERR_SRC_NOT_SUPPORTEDAttempts
To validate that the
<script>import functions properly with the HTML code, I included the script in theindex.html, resulting in the elimination of errors and successful loading of the player.I attempted importing the npm package with
and addingimport MuxPlayerElement from "@mux/mux-player";
to thedeclare module "@mux/mux-player";typings.d.ts.Imported the package into the component and tried declaring the @ViewChild template ref as a MuxPlayerElement to bypass any tree-shaking.
An Angular demo mentions "This player? It's an open book." at , but this led to the error
Only void and foreign elements can be self closed "mux-player"</mux-player> instead of .../>