Providing fallback MP4

[kitschpatrol]

Thanks for this component!

Forgive a possibly naive question, but I'm trying to understand what happens if both the native HLS support and hls.js are incompatible with a given browser?

Is this too rare of a case to be concerned about?

With a native video tag, you might provide multiple sources:

<video>
	<!-- Selected if browser has native HLS support -->
	<source
		src="https://example.com/some-video-playlist.m3u8"
		type="application/x-mpegURL"
	/>
	<!-- Selected if browser does not have native HLS support -->
	<source
		src="https://example.com/some-video.mp4"
		type="video/mp4"
	/>
	Your browser does not support HTML5 video.
</video>

HLS-native browsers (like Safari) correctly play the m3u8, and incompatible browsers correctly play the mp4.

However the same markup with the hls-video element always seems to play the mp4, even if there's native HLS support or hls.js would have worked.

<hls-video>
	<!-- Expected to be selected if browser has native HLS support OR hls.js works -->
	<source
		src="https://example.com/some-video-playlist.m3u8"
		type="application/x-mpegURL"
	/>
	<!-- In practice this is always selected -->
	<source
		src="https://example.com/some-video.mp4"
		type="video/mp4"
	/>
	Your browser does not support HTML5 video.
</hls-video>

Any advice on the correct approach to supporting this edge case is appreciated.

[luwes]

thanks for the question, it's a valid concern but like you speculated it's a very rare use case not to worry about.

hls.js works on all browsers with MSE support, the exception is iOS (iPadOS supports MSE) which supports native HLS so all cases are covered.

(the latest iOS also supports managed media source https://webkit.org/blog/14735/webkit-features-in-safari-17-1/)

---

hls-video's logic currently doesn't check the child source elements I believe so not sure what's happening in the 2nd example. I'll leave this issue open once we get around to possibly supporting child source elements.

[kitschpatrol]

Thank you for the quick response. Good to know that this is the edgiest of edge cases.