Play your assets with Mux Player

What is Mux Player?

Mux Player is a drop-in component that you can put in your web application to play Mux assets. Mux Player supports on-demand assets, live streams, and low-latency live streams. We have both an HTML element and React Mux Player.

Mux Player is a great option for those looking for a drop-in video player for on-demand, live streaming, and low-latency live streaming content with deep Mux Video and Mux Data integrations. Mux Player provides a responsive UI based on video player dimensions and stream type, automatic thumbnail previews and poster images, and modern video player capabilities (hello, Chromecast and DVR live streaming).

Mux Player is easily customized to suit your needs - be it a live sports event, collection of documentaries, or a video voicemail app. Mux Player can help you get your new product idea up and running quickly, save you from building a custom video player, or wrestling with code to make sense of what's possible.

In this guide you will learn how to use Mux Player in your web application.

Quickstart

Here are some examples of Mux Player in action. Feel free to copy this code directly into your application and get started!

All demos utilize the hosted package and HTML element for the easiest start.

Hosted package

copy
<script src="https://unpkg.com/@mux/mux-player"></script> 

HTML element

<mux-player
  stream-type="on-demand"
  playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
  metadata-video-title="Test video title"
  metadata-viewer-user-id="user-id-007"
></mux-player>

On demand example

You can view the CodeSandbox here.

<mux-player
  stream-type="on-demand"
  playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
  metadata-video-title="Test On Demand"
  metadata-viewer-user-id="user-id-007"
  primary-color="burlywood"
  secondary-color="#383838"
  muted="true"
  forward-seek-offset="15"
  backward-seek-offset="15"
  start-time="30"
></mux-player>

Live Stream example

You can view the CodeSandbox here.

<mux-player
  stream-type="live"
  playback-id="v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM"
  metadata-video-title="Test Live Stream"
  metadata-viewer-user-id="user-id-007"
  muted="true"
  default-hidden-captions
></mux-player>

Adaptive controls

As seen in the examples above, the available player controls will adjust based on your video's stream type:

• on-demand (video on demand)
• live (a regular live stream)
• ll-live (a low latency live stream)

The following will also appear on some devices based on device detection:

• Airplay
• Chromecast

Integrate

Below are instructions for implementing Mux Player in your web applications.

For each integration option (HTML element or React) you can choose your own adventure for installing Mux Player package - npm or yarn.

Recommended attributes

While syntax differs between React and HTML (you can see them in the examples below), there are three recommended values to provide in either approach:

• Playback ID: this is the Mux Playback ID that you would use to create stream.mux.com/{PLAYBACK_ID}.m3u8
• Stream Type: This value will determine (1) which default control set is shown and (2) the optimal configuration for HLS streaming
  • There are 3 valid stream type values you can provide:
    • on-demand (video on demand)
    • live (a regular live stream)
    • ll-live (a low latency live stream)
• metadata is an object with keys and values for any of the Mux Data Metadata fields. At a minimum, you should provide video_id, video_title, and viewer_user_id

HTML element

You will need to select one of the package options below. All examples will automatically update Mux Player. You can always anchor the package to a specific version if needed.

NPM

copy
npm install @mux/mux-player@latest 

Yarn

copy
yarn add @mux/mux-player@latest 

Hosted

copy
<script src="https://unpkg.com/@mux/mux-player"></script> 

Example HTML element implementation

copy
<script src="https://unpkg.com/@mux/mux-player"></script>
<mux-player
  stream-type="on-demand"
  playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
  metadata-video-title="Test VOD"
  metadata-viewer-user-id="user-id-007"
></mux-player> 

When using the HTML element version of Mux Player, you will see the Player Software in Mux Data come through as mux-player.

React

You will need to select one of the package options below. Both examples will automatically update the player. You can always anchor the package to a specific version if needed.

NPM

copy
npm install @mux/mux-player-react@latest 

Yarn

copy
yarn add @mux/mux-player-react@latest 

Example React implementation

import MuxPlayer from "@mux/mux-player-react"; 

export default function App() {
  return (
    <MuxPlayer
      streamType="on-demand"
      playbackId="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
      metadata={{
        video_id: "video-id-54321",
        video_title: "Test video title",
        viewer_user_id: "user-id-007",
      }}
    />
  );
}

When using the React version of Mux Player, you will see the Player Software in Mux Data come through as mux-player-react.

Core features

See what features and functionality Mux Player gives you out of the box.

Mux Video integration

Mux Player has a built-in integration with Mux Video and is optimized for Mux Video assets to provide features like timeline hover previews.

Mux Player will use the optimal Hls.js settings for Mux Video so you don't have to worry about that. It will also periodically test new versions of Hls.js and upgrade to known stable versions so you don't have to worry about upgrading to a new version of Hls.js yourself.

Mux Data integration

Mux Player is integrated with Mux Data to ensure you are able to understand your asset's performance and Mux Player's quality of experience.

We infer your Mux Data environment from the playback ID provided to Mux Player, so we will send Mux Data information to the same environment that your asset lives in.

If you would like to send the view data to a different Mux Data environment, you can pass the env-key (HTML element) attribute or envKey (React) prop.

Responsiveness

Mux Player has different permutations based on stream type (on-demand, live, ll-live), device availability, and screen size.

Note that the responsiveness of Mux Player is based on the size of the container that it is being rendered in, not the viewport size. If you have a bunch of small players in a large viewport, the layout of the controls for each player will be sized appropriately.

<div>
  <mux-player
    stream-type="live"
    playback-id="v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM"
    metadata-video-title="Test Live Stream"
    metadata-viewer-user-id="user-id-007"
    muted="true"
    default-hidden-captions
  ></mux-player>
</div> 

<div style="max-width: 250px;">
  <mux-player
    stream-type="live"
    playback-id="v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM"
    metadata-video-title="Test Live Stream"
    metadata-viewer-user-id="user-id-007"
    muted="true"
    default-hidden-captions
  ></mux-player>
</div>

Here is a CodeSandbox environment you can view samples in

Fun responsiveness facts

• When viewing video players (yes, all of them) on mobile iPhone browsers
  • fullscreen controls always default to Apple's
  • volume controls are not present, it must be changed via hardware controls (this also applies to iPads)

Error handling

Mux Player will internally make every attempt to recover from errors and maintain smooth playback.

When Mux Player encounters unrecoverable fatal errors, it will try to:

1. Make it clear to the viewer where the error is coming from and what, if anything, they can do about it
2. Provide context for a developer to debug and prevent the error from happening in the future
   • Developer logs prefixed with [mux-player] will contain debugging details and a link to more information
   • The error will be logged in Mux Data for further analysis

Accessibility

We've done a lot of work to move Mux Player towards being fully WCAG AA compliant. At this time we support:

• Keyboard navigation
• Screen reader navigation
• Closed captions / subtitles will show by default if available

We still have some work to do regarding audio descriptions and transcripts!

Timeline hover preview

Timeline hover previews show a small thumbnail of the video content at a given timestamp. They help to provide a contextual visual for the viewer based on where their cursor is positioned over the timeline.

When you play back a video hosted on Mux using Mux Player, you’ll see built-in timeline hover previews for the video with no extra work on your end.

Evergreen browser support

Mux Player supports the most recent versions of evergreen browsers on desktop and mobile. Evergreen browsers are the modern browsers that are automatically updated:

• Chrome (Mac, Windows, Linux, iOS, iPadOS, Android)
• Safari (Mac, iOS, iPadOS)
• Firefox (Mac, Windows, Linux, Android)
• Edge (Mac, Windows, Linux)

Chromecast

Chromecast support is built-in. The only thing you need to do in order to enable it is add the Google Cast script to the <head> of your webpage.

copy
<script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script> 

When this script is loaded and a Chromecast is detected on the network then Mux Player will show the Chromecast button in the control bar.

Live Stream playback

When live streaming with Mux you have 2 options for viewers:

• Non-DVR mode: This is most common. Use the playback_id associated with the Live Stream for playback. Non-DVR mode keeps viewers on the "live edge" of the live content and does not allow them to seek backwards while the stream is live.
• DVR mode: This is less common, but might be what you want depending on the use case. Use the playback_id associated with the Asset that corresponds to the Live Stream for playback. DVR mode allows users to seek backwards while the stream is still live.

For more information about non-DVR mode and DVR mode and some of the tradeoffs to consider, take a look at this guide.

When viewing live streams with Mux Player you have 2 options:

1. Use the playback_id associated with the Live Stream itself. If the Live Stream was created with "latency_mode": "low" then it is a low-latency live stream and in Mux Player you should specify stream-type="ll-live", otherwise specify stream-type="live".
2. Live Stream created in Mux have a corresponding Asset. Use the playback_id associated with the Asset in order to view the live stream in DVR-mode. For DVR-mode, if the Live Stream was created with "latency_mode": "low" then in Mux Player specify stream-type="ll-dvr", otherwise specify stream-type="dvr".

When using DVR-mode in Mux Player, the UI will show a timeline for users to scroll back to the beginning of the Live Stream while the Live Stream is still active.

Typescript support

Mux Player is fully written in TypeScript version 4.5. If you are on an older version of TypeScript (pre-4.0), you will likely have to upgrade your TypeScript package in order to get the TypeScript benefits.

Audio player

If you have an audio-only Mux asset, you can set the audio attribute on mux-player to display the audio player.

<div>
  <mux-player
    stream-type="on-demand"
    playback-id="x00Y6AhtNCs01UIW02FhPY4H6hZHkQLuiLoD1tTMj00zuxE"
    metadata-video-title="Test Audio Stream"
    metadata-viewer-user-id="user-id-007"
    muted
    audio
    primary-color="#075389"
    secondary-color="#d6e6f1"
  ></mux-player>
</div>

Customization

Learn how to change the look and feel, style, and functionality to suit your use case(s) and brand.

Poster image

By default Mux Player will pull the default poster image from the middle of the video based on the Playback ID that you provide.

https://image.mux.com/{PLAYBACK_ID}/thumbnail.jpg

If you want to change the poster image, you have two options:

1. Pass in thumbnail-time (React: thumbnailTime) with the value in seconds of the thumbnail that you want to pull from the video.

   • The thumbnail-time attribute and corresponding React prop are only available if you're NOT using Signed URLs.
   • If you are using Signed URLs you'll need to add the time= parameter to your signed token (see the "Usage with signed URLs" section below).

2. Use the poster= attribute (both HTML element and React).

   • You can set any arbitrary image URL the same way you would do with the HTML5 <video> element.

Aspect ratio

If you know the aspect ratio of your video (when getting an Asset from the Mux API you'll see aspect ratio in the form of w:h), then you can use that with CSS in the form of w / h. This is using the CSS aspect-ratio property which is supported in all evergreen browsers.

copy
mux-player {
  aspect-ratio: 16 / 9;
} 

Basic CSS Styles

Mux Player HTML element can be styled and positioned with CSS just like you would any other HTML element. For example:

copy
mux-player {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
} 

In React, you can style the <MuxPlayer> component the same way you style other components; with styled-components or directly with the style= prop.

Primary and secondary colors

The colors of Mux Player can be customized with the following options:

• primary-color (HTML element) / primaryColor (React): This will change the color of the control icons
• secondary-color (HTML element) / secondaryColor (React): This will set the background color of the control bar

HTML element Example:

<mux-player
  stream-type="on-demand"
  playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
  metadata-video-title="Test video title"
  metadata-viewer-user-id="user-id-007"
  primary-color="#f97316"
  secondary-color="#7c2d12"
></mux-player>

React example:

import MuxPlayer from "@mux/mux-player-react"; 

export default function App() {
  return (
    <MuxPlayer
      streamType="on-demand"
      playbackId="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
      metadata={{
        video_id: "video-id-54321",
        video_title: "Test video title",
        viewer_user_id: "user-id-007",
      }}
      primaryColor="#f97316"
      secondaryColor="#7c2d12"
    />
  );
}

Configuring controls

Below are the attributes (Web Component) / props (React) available to enable, disable, hide, or change aspects of various controls to suit your use case.

Mute

While Mux Player defaults to enabling sound, you can pass an attribute/prop to start playback muted.

muted (HTML element & React) is a boolean value that, when true, defaults sound to a muted state. Users can still unmute and manage volume as desired.

Skip forward/backward

The amount of time for skip forward/backward defaults to 10 seconds. This can be changed by passing the following attributes (HTML element) / props (React).

• forward-seek-offset (HTML element) or forwardSeekOffset (React)
  • example: forward-seek-offset="5" will apply a 5 second skip forward
• backward-seek-offset (HTML element) or backwardSeekOffset (React)
  • example: backward-seek-offset="5" will apply a 5 second skip backward

Closed Captions

When captions are available on an asset, we show the control for them and enable their appearance by default.

You can opt to disable their appearance (while still showing the control) by using the default-hidden-captions (HTML element) attribute or defaultHiddenCaptions (React) prop and a boolean value.

Example: default-hidden-captions="true"

Managing behavior

The following are options for adjusting the behavior of Mux Player.

Start Time

If you'd like to set a specific time stamp as the start of playback for an asset, you can use the start-time (HTML element) attribute or startTime (React) prop and a time value.

Example: start-time="13" will begin playback at 13 seconds into the asset.

Autoplay

Autoplay in browsers is a difficult beast. See this doc if you're curious about the details. The good news is that Mux Player can help you handle autoplay when it is warranted.

Before you decide to autoplay your assets, first ask yourself: Is this necessary? Often times it negatively impacts accessibility, and many viewers find autoplay to be an impediment to their experience.

Here are your options for autoplay:

• autoplay attribute (React: autoPlay prop): This will behave like the HTML video element autoplay attribute. It will try to autoplay with the sound on, and likely it will fail.
• autoplay="muted" attribute (React: autoPlay="muted"): This will autoplay the video in the muted state (and likely work).
• autoplay="any" attribute (React: autoPlay="any"): This will autoplay the video with sound first, and if that fails then it will try to autoplay muted.

Looping content

You can automatically loop the asset once playback completes with the loop HTML element attribute or React prop and a boolean value.

Example: loop="true"

Advanced usage

See how to use features such as Events, Signed URLs, Viewer Experience Feedback, and tap into Media-Chrome from Mux Player.

Events

Mux Player emits all of events available on the HTML5 video element.

For example, if you want to keep track of how much of a particular video a user has watched, you probably want to use the timeupdate event like this:

HTML element

const muxPlayer = document.querySelector("mux-player"); 

muxPlayer.addEventListener("timeupdate", function (event) {
  console.log('time update!', event);
});

In React, the events are camel-cased and prefixed with on*. For example timeupdate becomes onTimeUpdate:

React

copy
function saveWatchProgress(event) {
  /* event */
}

<MuxPlayer onTimeUpdate={saveWatchProgress} />; 

Signed URLs

If you followed the guide for Secure video playback then you are using signed URLs and a few extra steps are required to use Mux Player (or any player for that matter).

First off, you should already be creating JSON Web Tokens (JWTs) on your server. If you're not doing that already, head over to that guide and do that part first.

Note that JWTs are granular, so a unique token is used for each resource:

• PlaybackID is used to get the actual video.
• Thumbnail is used to get a still image from the video. Mux Player uses it for a poster image
• Storyboard is used to get a storyboard representation of the video. Mux Player uses this for the timeline hover previews feature. This is only relevant for on-demand stream types (live and ll-live stream types don't support timeline hover previews).

Each JWT will look something like this below. These examples were created with playback ID qIJBqaJPkhNXiHbed8j2jyx02tQQWBI5fL6WkIQYL63w.

Playback token:

copy
eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImFkamYzb2JpYURUcEF0QVlpS3NCMkpvRlkwMXBpbEJMTHdYcUQzaHpJYURJIn0.eyJleHAiOjE5NjE2NDY0MDMsImF1ZCI6InYiLCJzdWIiOiJxSUpCcWFKUGtoTlhpSGJlZDhqMmp5eDAydFFRV0JJNWZMNldrSVFZTDYzdyJ9.mukZou10_iwaqPeHVFbXwTZShMK1D8kWpFAFOl6bwuIMB7hx0bAqscZxj5FwrIB8dzB6s_9YtJEEVXcR6ezxOhOc_y2ij1XM4YQYCuGH-elJc3rapHbahv2K7L_asz9Bdu1Ld6i6Ux7keNpEuGSYCDmsPmvdII7_XAPmzU01ZTvaXqCgzCY2PO7xz6z3hu1HOww2eL41TSif_Zu0okNZlhfHE9U-nyr4OVpuS9Q-rTtVvfE2ILSd9Ezt02AuOK-JkBCeR3Xf-UrbXB33ZFHLJrYVA-B516Iym0CGRfVssZsAn80_PNaxS_3M_OmVzyaDJ4zudb-YjGcaNl0yf96h6w 

Thumbnail token:

copy
eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImFkamYzb2JpYURUcEF0QVlpS3NCMkpvRlkwMXBpbEJMTHdYcUQzaHpJYURJIn0.eyJleHAiOjE5NjE2NTkzMzAsImF1ZCI6InQiLCJzdWIiOiJxSUpCcWFKUGtoTlhpSGJlZDhqMmp5eDAydFFRV0JJNWZMNldrSVFZTDYzdyJ9.zQ0tDimpgu7nsT9Tb7GBgitMpYSbLBodwS-fSc7U0K0WT-giCUgxXXSqXquwpHMjEEfSuCsCU3Y1gq2P7WaJUBGTOTLKT5GOwyhjeoJzTPXEQqW7T-tpKXhjEDVwy_H2UPNVdA9ZALos5R9rrWyiTQA53sxT56FWy-IhvaISpiB16nzankRKCAo98kh6lloexE8p3lXnUhLwIK8Hqco4hRmHSmWqUndnJrbq0_kag0o8R0drffSMj6CvKas8_f6v3MtHXDhW0JkJ1TZKwICt7W-jrSyMfhgAb9wltBCUXdNHYvQTXkFfFnsI1R-BuZodQL2zN3pVBqzuhQA0UPADMw 

Storyboard token (only needed for on-demand):

copy
eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImFkamYzb2JpYURUcEF0QVlpS3NCMkpvRlkwMXBpbEJMTHdYcUQzaHpJYURJIn0.eyJleHAiOjE5NjE2NTkzMTQsImF1ZCI6InMiLCJzdWIiOiJxSUpCcWFKUGtoTlhpSGJlZDhqMmp5eDAydFFRV0JJNWZMNldrSVFZTDYzdyJ9.QxvtM-FBakS8IPl_mZloBKLKyHRU8md7IbSifAYbAVHrLwUre3-CXlOcsd6sKi0hVen_DnSqQeuuFTYF6o2TeS31gnBsf5U4W7JDpOjxAepj4ODM6bpPJBu6XDpZmMTduuwVrIXP9pQWSwiHSQ93hk6RR17YrPgGz6sCXIL5gt0re_WqkSEazwYEscu9eByMN3F_sM7W830C7Wzeatb1TMeEf6wQhbpKABLB33VM0FOuM5ojjI9DWmDhJksfFVrOxaZtoju4hjiWQtNPVBCFP28J9LHNLA7brRXvDGaIUxHG5-vrcVuImlghdWgPyrAOb0lWYSiklYx2ObHhNWJK1g 

When you have generated the 3 tokens, pass them into Mux Player:

Example with the HTML element:

copy
<mux-player
  playback-id="qIJBqaJPkhNXiHbed8j2jyx02tQQWBI5fL6WkIQYL63w"
  playback-token="eyJhbGciOiJSUzI1NiI..."
  thumbnail-token="eyJhbGciOiJSUzI1N..."
  storyboard-token="eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsI..."
  metadata-video-id="video-id-54321"
  metadata-video-title="Test video title"
  metadata-viewer-user-id="user-007"
  stream-type="on-demand"
></mux-player> 

If you are using JavaScript and Mux Player, you can use the tokens property too:

copy
const muxPlayer = document.querySelector("mux-player");
muxPlayer.tokens = {
  playback: "eyJhbGciOiJSUzI1NiI...",
  thumbnail: "eyJhbGciOiJSUzI1N...",
  storyboard: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsI...",
}; 

If you're using the React version of Mux Player, use the tokens prop:

copy
<MuxPlayer
  playbackId="qIJBqaJPkhNXiHbed8j2jyx02tQQWBI5fL6WkIQYL63w"
  metadata={{
    video_id: "video-id-54321",
    video_title: "Test video title",
    viewer_user_id: "user-id-007",
  }}
  tokens={{
    playback: "eyJhbGciOiJSUzI1NiI...",
    thumbnail: "eyJhbGciOiJSUzI1N...",
    storyboard: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsI...",
  }}
  streamType="on-demand"
/> 

Preloading assets

By default preload will behave similar to the HTML5 <video> element.

Use the preload= attribute with values of "none", "metadata" or "auto".

The default is "auto", which will start loading the video as soon as possible and give the user the best experience with the shortest startup time.

If you want to preserve bandwidth (& delivery cost) set preload="none".

The tradeoff with using preload="metadata" or preload="none" is that when the user plays the video they will experience a slower startup time because the video has to load before playback can start. You'll see the slower startup time reflected in your Mux Data dashboard and this will negatively impact the Overall Viewer Experience metric.

Additional documentation

• HTML element repo
• React repo

FAQs

You've got questions, we've got answers!

Do you support non-Mux HLS streams?

Mux Player is designed with the Mux Platform in mind. Being tightly coupled with Mux Video is what enables features like timeline hover previews, and those sweet, descriptive errors in Mux Data.

Do you have an embeddable version of Mux Player?

Not yet, but we'd love to hear more about what you want out of this type of Mux Player integration experience. Email us at player@mux.com!

Do you have a Mux Player for native mobile?

We're looking into what's needed here, so if you are interested in talking with us about your React Native, Flutter, Android, or iOS Mux Player needs, we'd love to hear from you at player@mux.com!

I would love to speak to someone on the team about a feature idea or a problem I'm running into during the public beta, how can I do that?

Please leave us some feedback and we'll be in touch!

How is Mux Player built?

Mux Player is built with Web Components. Web Components is a native browserAPI for defining custom HTML tags that can be used in the DOM. Mux Player is built on top of Media Chrome and the Mux Video HTML element. You can think of it like this:

• Mux Video HTML element handles the HLS playback tech behind the scenes and integration with Mux Data.
• Media Chrome is the UI layer. Both the Mux Video HTML element and Media Chrome are maintained and under active development by Mux.

What are the developer system requirements?

Mux Player package targets ES2019, if you're targeting an older JavaScript runtime Mux Player might not be compatible with your build setup.

Release notes

0.1.0-beta.21

• Update: Mux Player (and all Mux Elements) are now published under the @mux NPM scope. Please update @mux/mux-player references to @mux/mux-player as of 0.1.0-beta.21.

0.1.0-beta.20

• Feature: Chromecast is built it -- via castable-video. See docs in the Core Features section for details on how to enable it.

0.1.0-beta.19

• Fix: import for castable-video while we hammer on Chromecast.

0.1.0-beta.18

• Fix: Some captions shifting jankyness on live streams when shifting wasn't necessary.
• Fix: Captions offset for Safari
• Feature: Support for audio-only Mux assets with the audio attribute
• Feature: Experimental Chromecast support added with castable-video. This is intentionally undocumented while we work out the kinks.
• Improvement: Better progress bar alignment.

0.1.0-beta.17

• Fix: Some recoverable errors were incorrectly being sent to Mux Data -- this caused an inflated playback error percentage metric in your Mux Data dashboard. This incorrect error tracking was especially prevalent on live streams. We fixed this after it was discovered at TMI.

0.1.0-beta.16

• Fix: Log an error if a token is passed in with playback-id (playback tokens should be passed in via playback-token attribute)

0.1.0-beta.15

• Fix: update commonjs import files to cjs.js. This fixes some build systems that rely on the cjs.js extension

0.1.0-beta.14

• Improvement: Tweaked a few Hls.js configuration settings for live and low-latency live based on some recent testing (backed up by Mux Data, of course). This is the kind of thing the team working on Mux Player worries about so that you don't have to!

0.1.0-beta.13

• Fix: For live streams on non-Safari browsers the red (live) / gray (behind live) dot indicator was being a little too aggressive about switching to gray, which indicates the viewer is behind the live edge. This is fixed now, you shouldn't fall back from the live edge unless you pause or rebuffer.

0.1.0-beta.12

• Important fix for fullscreen. In previous versions if you entered fullscreen you would get stuck there
• Improve interaction so that clicks (not taps) anywhere on the video player will play/pause. Many people expected and asked for this behavior, so now you have it.

0.1.0-beta.11

• Added thumbnail-time optional attribute that can be used to set the poster image thumbnail (if you're not using signing tokens)
• Point to github/template-parts@0.5.2 instead of Mux's fork because they were so kind to get a fix in for us. Thanks GitHub!

0.1.0-beta.10

• Improvement: The progress bar now shows above the controls, it's cleaner 💅🏼
• Fix: when changing playback-id on an existing mux-player instance we had some leftover state around
• Fix: full screen was incorrectly using the controls layout depending on the size of the player before it entered full screen. That meant if the player was small and you went full screen you still saw the small controls. Bad!

0.1.0-beta.9

• Your beautiful errors will now flow nicely into Mux Data. Your Mux Data errors dashboard just got a whole lot more useful. This is a big one.
• Mux Player is now implemented as a Media Chrome "theme" under the hood. Laying some groundwork for some exciting Media Chrome things to come
• Fix for adding event listeners on mux-player, if mux-player JavaScript was loaded after your HTML, events wouldn't get registered. Sorry about that -- fixed now. And we have tests to make sure we don't accidentally introduce a regression down the road.
• The .hls property on mux-player is super-secret and should not be used unless you are a serious professional. We make no guarantee and your warranty is void if you use this property. To reflect this stance, it has been renamed to _hls.
• Fixed some seek to live behavior
• When the error dialog is open we no longer steal the focus of the document. Much better.

0.1.0-beta.8

• If you're using Webpack 4, maybe upgrade? But if not, we got you covered. Fixed package.json to point browser field at mjs so that Webpack 4 is happy

0.1.0-beta.7

• Fix: make mux-player size based on video element
• Fix: make mux-player errors more uniform

0.1.0-beta.6

• Fix: messed up the release in beta.5, quick follow-on

0.1.0-beta.5

• Fix: clear out some state that was hanging around when playback-id is changed on an existing Mux Player instance, and add some test coverage for this sort of thing
• Fix: mux-player web component metadata- attributes were not always propagating down
• Fix: prevent non-fatal Hls.js errors from propagating and causing error states

0.1.0-beta.4

• Paid off some technical debt to handle web components being upgraded after existing in the DOM
• Fix primary-color attribute so that it is used for all controls, both icons + text. Previously it was only being applied to icon colors

0.1.0-beta.3

• Fix developer log links that go to GitHub
• Make sure internal state monitoring setup happens when the element exists. Fixes a bug in React when the captions button was sometimes not showing.

0.1.0-beta.2

• Added descriptive error handling. This is important so that you and your viewers are able to easily and quickly understand why a video is not playing. Is your local network connection offline? Is the signed URL expired? Maybe you mixed up PlaybackIDs and you have the wrong signed URL? Is it a problem specific to the media on your device? Often times video-related playback errors are cryptic and difficult to understand the root cause of. We put extra effort into this and we hope it helps you when things go wrong 💖.
• Fix conditional rendering bug when attributes are removed sometimes the template wasn't updating.

0.1.0-beta.1

• When the control bar is engaged, slide the captions/subtitles up so they are still visible and don't get obscured

0.1.0-beta.0

First beta tag release 🎉

• Extended autoplay options autoplay, autoplay="muted" and autoplay="any" are all options now. See docs above for details.
• Started tracking Player Startup Time with Mux Data. The mo' QoE data we can get, the better!
• Changed the behavior of the time display, it now defaults to ascending time (current time) and on click will toggle to show remaining time. Previously it showed only remaining time and that was confusing.
• Fixed a bug related to storyboards on the thumbnails track when the underlying source changed. This should have impacted exactly 0 developers but we wanted to make sure to squash it anyway. If you somehow ran into this bug then you're welcome.

0.1.0-alpha.7

• Support for Signed URLs (see advanced usage section)
• No longer require env-key to be passed in (Mux Data will infer environment based on the PlaybackID)