Displaying Videos in Your Frontend

Once uploaded to Mux, videos can be streamed within a few seconds through just-in-time encoding.

Video Components

Mux provides a set of web components that act as drop-in replacements for the native video element. Instead of a source file, they take a Mux playback id and handle adaptive bitrate streaming.

mux-video

Extends the native video element with support for streaming Mux videos. Attributes like autoplay and loop or events like playing will continue to work as expected.

- <video src="/assets/video.mp4" autoplay>
+ <mux-video playback-id="DS00Spx1CV902M" autoplay></mux-video>
+ <script async src="https://unpkg.com/@mux/mux-video@0"></script>

mux-player

Wraps the native video element in a customizable video player. Accepts the same attributes and emits the same events as a video element, and adds interactive playback controls.

- <video src="/assets/video.mp4">
+ <mux-player playback-id="DS00Spx1CV902M"></mux-player>
+ <script async src="https://unpkg.com/@mux/mux-player@3"></script>

Antlers Tags

You can use the provided Antlers tags to render the video components and placeholder images. Learn more about the available Antlers tags.

{{ mux:player src="assets::video.mp4" script="true" }}

Output

<mux-player
  playback-id="85g23gYz7NmQu02YsY81ihuod6cZMxCp017ZrfglyLCKc"
  width="1920"
  height="1080"
></mux-player>
<script async src="https://unpkg.com/@mux/mux-player@3"></script>

Headless Frontends

For headless setups, the addon exposes custom GraphQL Types you can query.

Secure Playback

By default, videos uploaded by this addon are public and can be watched without restrictions. If your use case requires limiting access to certain users, you can enable Secure Playback.