Video stops playing after increasing the volume in demo app

What version of Hls.js are you using?

v1.4.10

What browser (including version) are you using?

Safari 16.5.2

What OS (including version) are you using?

macOS 13.5

Test stream

Default Big Buck Bunny - adaptive qualities

Configuration

{
  "debug": true,
  "enableWorker": true,
  "lowLatencyMode": true,
  "backBufferLength": 90
}

Additional player setup steps

No response

Checklist

[X] The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
[X] The issue occurs in the stable client (latest release) on https://hlsjs.video-dev.org/demo and not just on my page
[X] The issue occurs in the latest client (main branch) on https://hlsjs-dev.video-dev.org/demo and not just on my page
[X] The stream has correct Access-Control-Allow-Origin headers (CORS)
[X] There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

Make sure that you have default "Stop media with sound" setting for hls.js demo page set in Safari preferences.
Mute the demo player
Refresh the demo page (video should now autoplay muted)
Increase the volume by hovering volume icon and dragging the volume slider up

It is important to use the dragging motion and not click into the volume slider.

Expected behaviour

Video continues playing and the volume increases.

What actually happened?

Video stops playback until you drag the volume down to mute.

Probably related to this issue in webkit: https://bugs.webkit.org/show_bug.cgi?id=259681

Console output

0.015 | Loading https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
0.018 | Loading manifest and attaching video element...
0.022 | 5 quality levels found
0.024 | Manifest successfully loaded
0.039 | Media element attached

Chrome media internals output