Appending a <source> element?

[aaronadamsCA]

I think I wish I could use this library to get a DOM that looks like this:

<video autoplay>
  <source src="video.m3u8" type="application/vnd.apple.mpegurl" />
  <source src="blob:..." />
</video>

iOS and Android browsers tend to support native HLS playback. In the real world (high latency, slow phone, etc.) they also tend to download and execute JavaScript more slowly than their desktop counterparts.

As far as I can tell, the above DOM would allow those mobile devices to start playing HLS video before JavaScript executes, without affecting desktop devices that depend on HLS.js. I think the HLS.js fallback might be more reliable, too, since it wouldn't use canPlayType().

Is there something about this approach that wouldn't work well? I'm still very new to HLS and MediaSource, so I wanted to ask first before I go writing up some big suggestion for a new feature that wouldn't be viable.

Thanks!

[robwalch]

HLS.js always adds a MediaSource or ManagedMediaSource to the media element passed to hls.attachMedia() (src=blob). You should not do this after adding an HLS source (src=..m3u8) if you goal is to avoid JavaScript/MSE based streaming. Only do one or the other, based on the result of HLS.isSupported() as described in the README and API.md examples. Use HLS.isSupported() to prioritize the use of hls.js or perform a support check for "application/vnd.apple.mpegurl" with additional logic to deem that in-browser HLS playback is preferable over MSE based playback.

The only reason to add two such sources is for AirPlay with MSE. In that case, the m3u8 source comes after the MediaSource blob added by hls.js in Safari. This allows AirPlay devices to receive the m3u8 url for playback since the MediaSource (blob) is a reference to something only available on the sender.