Players Overview

While other providers like Vimeo or YouTube provide an iFrame embed that includes the player and data tracking, Mux provides only a standard HLS (http live streaming) link, a common video streaming format. The advantage with only the streaming link is a lot of flexibility to pick and design a video player, and no vendor lock-in for playback experiences.

A little about HLS. This format chunks the video into small segments. Standardized by Apple, the only browser able to natively play it back is Safari [surprise, surprise]. Therefore we need javascript to make HLS work in other browsers. Luckily most players support HLS through a project called hls.js.

Having access to the streaming URL, you have the ability to customize what player is used, how it looks, and how it behaves. The advantage is much more flexibility and customization, but does require some additional work in setting up the player. There are several established players like JWPlayer and Video.js, plus new ones like Mux Player and Vidstack. Check out the examples in the sidebar. If you don’t know where to start, try Vidstack or Mux Player first since they will work quickly.

Most players will utilize the playback and poster tags:

{playback_url} or {dvr_url}
{thumbnail_url}

In addition there are what Mux calls static renditions. These are standard mp4 files, usually with 3 quality levels available to select from, that can be used for playback. Renditions have to be enabled (they are by default), and take a little longer to encode after uploading. Renditions are available in a tag loop, with more information is in the tag parameters section.

{renditions limit="1"}
    <video src="{url}" controls>
{/renditions}

The HLS streaming links are preferred because they will provide a better playback experience, so use renditions only where it makes sense such as short videos (under 20 seconds), low quality, or the need to cache a video offline for playback.

Mux Guide on Playback: https://docs.mux.com/guides/video/play-your-videos