Mux Elements

<mux-video> is a Mux-flavored HTML5 video web component. It provides a high-level abstraction over the standard <video> element and Hls.js.

Key benefits include:

• Automatic Error Recovery: Handles recoverable playback errors, which is essential for live streams that may experience disconnects.
• Optimized Configuration: Automatically uses optimal Hls.js settings specifically tuned for Mux Video.
• Managed Dependencies: Periodically tests and upgrades to stable versions of Hls.js automatically, reducing maintenance overhead.

Playback Core is a collection of utility functions designed for managing video/audio playback and integrating Mux Data with various Mux elements. While it is primarily an internal dependency for packages like mux-video, mux-video-react, mux-audio, and mux-audio-react, developers building custom playback solutions or specialized Mux integrations may use it directly.

To see the full list of available functions and types, refer to the src/index.ts file in the package.

The @mux/mux-uploader-astro component supports customization via CSS Parts and Slots.

• CSS Parts: Use the ::part() pseudo-element in your CSS to style specific internal elements of the uploader. For a complete list of available parts, refer to the base @mux/mux-uploader reference.
• Slots: Use <slot /> elements within the component's context (if applicable via Astro) or provide content to predefined slots to inject custom UI. For a complete list of available slots, refer to the base @mux/mux-uploader reference.

A standard Astro project follows this directory structure:

• public/: Contains static assets like favicon.svg that are served directly.
• src/layouts/: Contains reusable layout components (e.g., Layout.astro).
• src/pages/: Contains your application routes; index.astro serves as the home page.
• package.json: Defines project dependencies and scripts.

/
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

To defer loading the player and improve performance, import from @mux/mux-player-react/lazy. When using the lazy version, you can use the loading prop (e.g., loading="viewport") to control when the player initializes.

If you are using a Node.js server (like Next.js), it is recommended to combine @mux/mux-player-react/lazy with @mux/blurup to provide a placeholder image while the player loads.

import MuxPlayer from '@mux/mux-player-react/lazy';

<MuxPlayer
  loading="viewport"
  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
  metadata={{
    video_id: 'video-id-123456',
    video_title: 'Bick Buck Bunny',
    viewer_user_id: 'user-id-bc-789',
  }}
/>;

You can enable ads by providing a VAST ad tag URL via attributes or properties. You can also configure the player to continue playing content even if an ad blocker prevents an ad from loading.

<!-- Using Attributes -->
<mux-video 
  ad-tag-url="https://example.com/vast-tag" 
  allow-ad-blocker
></mux-video>

Install the @mux/mux-audio-react package using your preferred package manager, then import it into your application to register the <mux-audio> custom web component.

yarn add @mux/mux-audio-react
# or
npm i @mux/mux-audio-react

import '@mux/mux-audio-react';
// or
require('@mux/mux-audio-react');