Media Stream Type

One of the states the media-controller can provide is mediastreamtype, with potential values of live, on-demand, or empty (unknown).

Media streams come in two major types, live and on-demand (often called VOD or “Video On-Demand” for video). The core difference between the two is that with a live stream the duration of the media is unknown, because it hasn’t finished yet or may never finish in the case of 24/7 live streams. This has implications for the progress bar (media-time-range) and often comes with other UI differences like a red light icon to signal the content is live, or features allowing the viewer/listener to interact with the live streamer. An on-demand UI may also include unique features like chapters and episodes menus.

The mediastreamtype state makes it possible to build a player UI that adapts to the current stream type.

For example, you can hide the media time range (progress bar) during a live stream.

  media-controller[mediastreamtype=live] media-time-range {
    display: none;

  <video slot="media"></video>
    <!-- The time range will be hidden for a live stream -->

See also default-stream-type.