Native HLS on Safari only for AirPlay

[niklaskorz]

Have you read the FAQ and checked for duplicate open issues?

Yes

Is your feature request related to a problem? Please describe.

When using AirPlay on Safari with useNativeHlsOnSafari: false, AirPlay becomes unusable. This is because the blob source set on the video element cannot be handled by the AirPlay target.

Describe the solution you'd like

As of Safari 16.4, Safari can automatically fall back to another supported <source> element when starting AirPlay. An example is provided by this test in the WebKit repository. The basic idea would be to provide both the Media Source Extensions-backed video blob and the address of the HLS playlist as separate <source> elements as children of the <video> element.

Describe alternatives you've considered

An alternative would be to re-enable useNativeHlsOnSafari when AirPlay is requested by the user, seek to the previous timestamp and start playback again.

[avelad]

@niklaskorz are you interested on send a PR for this?

[avelad]

More info in https://developer.apple.com/wwdc23/10122

[niklaskorz]

I suppose I could work on #5271 and this in a combined PR @avelad, as the "new" AirPlay approach is explicitly mentioned in the context of Managed MSE. Interestingly the hls.js PR video-dev/hls.js#5542 does not seem to have any AirPlay specific changes.

[avelad]

After having merged #5683 this development has been unlocked.

[avelad]

@niklaskorz are you interested on send a PR for this?

[avelad]

More info in https://webkit.org/blog/15036/how-to-use-media-source-extensions-with-airplay/

[joeyparrish]

This snippet from the WebKit blog uses <source> tags to manage an alternate HLS source for AirPlay:

// Add MSE/MMS streaming source
const videoSource1 = document.createElement('source');
videoSource1.type = 'video/mp4';
videoSource1.src = URL.createObjectURL(source); // Create URL from MediaSource
video.appendChild(videoSource1);

// Add AirPlay-compatible HLS source
const videoSource2 = document.createElement('source');
videoSource2. type = 'application/x-mpegURL';
videoSource2.src = airplayURL;
video.appendChild(videoSource2);

We could do this, but we have to be careful to track those <source> elements and clean them up so the <video> element doesn't become cluttered over time after multiple playbacks.