Search code examples
htmlvideohtml5-video

Are browsers swapping video source on resize or fullscreen?

Given a video that is hosted in different sizes to optimize for different devices, as in MDN’s example:

<video controls>
  <source src="foo-large.webm" media="(min-width: 800px)">
  <source src="foo.webm">
  I'm sorry; your browser doesn't support HTML video.
</video>

I’m wondering whether browsers are switching from one source to the other when the viewport gets resized?

I guess technically they could, one would expect that in most cases the video contents and durations are the same, and most modern containers allow for streaming and random access if I’m not mistaken.

Do they?

Solution

  • The <source> tag allows browsers to pick the best video source for the user's device, ensuring an optimal viewing experience. Initially, the browser selects a video based on screen size, but it won't switch qualities if the screen size changes during playback to avoid playback issues.

    It even selects the source when initialised, resizing the browser window won’t change the source even before playback, at least in Chrome and Firefox.

    For dynamic quality adjustments, technologies like MPEG-DASH (Dynamic Adaptive Streaming over HTTP or HLS (HTTP Live Streaming) are recommended, as they adapt to changing conditions without needing a video reload.

    They provide several segments in different qualities inside one container, so only a single source needs to be provided.

    While MPEG-DASH isn't directly supported in HTML5, there are JavaScript implementations of MPEG-DASH which allow using MPEG-DASH in web browsers using the HTML5 Media Source Extensions (MSE).

    MDN provides guidance on how to set up DASH.

    In the example you've provided, the browser will choose which <source> to use when the video is initially loaded based on the current viewport width. If the viewport width is 800 pixels or wider, the browser will choose foo-large.webm; otherwise, it will fall back to foo.webm.