fix: Resolve infinite loading state in Safari with MSE and on-demand stream type by Pintorado · Pull Request #1257 · muxinc/elements

Pintorado · 2025-12-15T20:26:28Z

Closes https://github.com/muxinc/devextravaganza/issues/190 and https://github.com/muxinc/devextravaganza/issues/130

Problem

When using prefer-playback="mse" with stream-type="on-demand" on mux-player, Safari experienced an infinite loading state.

Changes

Added #hasLoaded flag that is set to true when loadstart event fires
Only if the element has loaded return the storyboard URL, otherwise return undefined

Testing

When using mux-player with prefer-playback="mse" and stream-type="on-demand" in Safari, the video now loads and plays correctly without getting stuck. Try refreshing the page a couple of times when testing this to make sure that there are no cache problems.

Code snippets to test:

HTML:

<mux-player
  stream-type="on-demand"
  prefer-playback="mse"
  playback-id="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"
/>

React:

<MuxPlayer
  streamType="on-demand"
  preferPlayback="mse"
  playbackId="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"
/>

…ari issues using MSE & on-demand

vercel · 2025-12-15T20:26:33Z

@Pintorado is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

snyk-io · 2025-12-15T20:26:38Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

luwes

Needs changes to more clearly show the root cause and use less code to workaround the iOS bug.

vercel · 2025-12-17T19:34:26Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
elements-demo-astro	Ready	Preview, Comment	Dec 18, 2025 4:42pm
elements-demo-nextjs	Ready	Preview, Comment	Dec 18, 2025 4:42pm
elements-demo-svelte-kit	Ready	Preview, Comment	Dec 18, 2025 4:42pm
elements-demo-vanilla	Ready	Preview, Comment	Dec 18, 2025 4:42pm
elements-demo-vue	Ready	Preview, Comment	Dec 18, 2025 4:42pm

luwes · 2025-12-18T17:45:46Z

packages/mux-player/src/base.ts

+    // NOTE: We don't want to return a storyboard until the media has loaded,
+    // otherwise iOS Safari would stall playback.
+    if (!this.#hasLoaded) return undefined;
+


Could you remove this and revert the test changes?
We still want the storyboard getter to return a defined value but what we pass to the template in getProps should be undefined until hasLoaded...

Pintorado · 2025-12-18T18:30:45Z

packages/mux-player/test/player.test.js

+    let storyboardTrack;
+    await waitUntil(() => {
+      storyboardTrack = muxVideo.shadowRoot.querySelector("track[label='thumbnails']");
+      return storyboardTrack && !!storyboardTrack.getAttribute('src');
+    }, 'storyboard <track> src never set');


@luwes this test was failing because storyboardTrack was null at this point. We now wait until the track is rendered before accessing its src attribute.

luwes · 2025-12-18T18:38:47Z

packages/mux-player/src/base.ts

+  get hasLoaded() {
+    return this.#hasLoaded;
+  }
+


Suggested change

get hasLoaded() {

return this.#hasLoaded;

}

luwes · 2025-12-18T18:39:49Z

packages/mux-player/src/base.ts

  #isInit = false;
  #tokens: Tokens = {};
  #userInactive = true;
+  #hasLoaded = false;


Suggested change

#hasLoaded = false;

luwes · 2025-12-18T18:40:02Z

packages/mux-player/src/base.ts

    // NOTE: Make sure we re-render when <source> tags are appended so hasSrc is updated.
-    this.media?.addEventListener('loadstart', () => this.#render());
+    this.media?.addEventListener('loadstart', () => {
+      this.#hasLoaded = true;


Suggested change

this.#hasLoaded = true;

luwes · 2025-12-18T18:41:07Z

packages/mux-player/src/base.ts

    hasSrc: !!el.playbackId || !!el.src || !!el.currentSrc,
    poster: el.poster,
-    storyboard: el.storyboard,
+    storyboard: el.hasLoaded && el.storyboard,


Suggested change

storyboard: el.hasLoaded && el.storyboard,

storyboard: el.media.src && el.storyboard,

The fix didn't work with el.media.src but it does work with el.media?.currentSrc

luwes · 2025-12-18T21:21:03Z

packages/mux-player/src/base.ts

    hasSrc: !!el.playbackId || !!el.src || !!el.currentSrc,
    poster: el.poster,
-    storyboard: el.storyboard,
+    storyboard: el.media?.currentSrc && el.storyboard,


luwes

LGTM thanks!

🤖 I have created a release *beep* *boop* --- <details><summary>@mux/playback-core: 0.32.2</summary> ## [0.32.2](https://github.com/muxinc/elements/compare/@mux/playback-core@0.32.1...@mux/playback-core@0.32.2) (2025-12-18) ### Bug Fixes * avoid prerender errors caused by date access ([#1226](#1226)) ([d044183](d044183)) </details> <details><summary>@mux/mux-player: 3.10.2</summary> ## [3.10.2](https://github.com/muxinc/elements/compare/@mux/mux-player@3.10.1...@mux/mux-player@3.10.2) (2025-12-18) ### Bug Fixes * bump the prod-dependencies group across 2 directories with 2 updates ([#1259](#1259)) ([ee4d961](ee4d961)) * Resolve infinite loading state in Safari with MSE and on-demand stream type ([#1257](#1257)) ([dadca90](dadca90)) ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/mux-video bumped from 0.29.1 to 0.29.2 * @mux/playback-core bumped from 0.32.1 to 0.32.2 </details> <details><summary>@mux/mux-player-astro: 3.10.2</summary> ## [3.10.2](https://github.com/muxinc/elements/compare/@mux/mux-player-astro@3.10.1...@mux/mux-player-astro@3.10.2) (2025-12-18) ### Miscellaneous Chores * **@mux/mux-player-astro:** Synchronize player versions ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/mux-player bumped from 3.10.1 to 3.10.2 * @mux/playback-core bumped from 0.32.1 to 0.32.2 </details> <details><summary>@mux/mux-player-react: 3.10.2</summary> ## [3.10.2](https://github.com/muxinc/elements/compare/@mux/mux-player-react@3.10.1...@mux/mux-player-react@3.10.2) (2025-12-18) ### Miscellaneous Chores * **@mux/mux-player-react:** Synchronize player versions ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/mux-player bumped from 3.10.1 to 3.10.2 * @mux/playback-core bumped from 0.32.1 to 0.32.2 </details> <details><summary>@mux/mux-audio: 0.15.19</summary> ## [0.15.19](https://github.com/muxinc/elements/compare/@mux/mux-audio@0.15.18...@mux/mux-audio@0.15.19) (2025-12-18) ### Bug Fixes * Resolve infinite loading state in Safari with MSE and on-demand stream type ([#1257](#1257)) ([dadca90](dadca90)) ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/playback-core bumped from 0.32.1 to 0.32.2 </details> <details><summary>@mux/mux-audio-react: 0.15.19</summary> ## [0.15.19](https://github.com/muxinc/elements/compare/@mux/mux-audio-react@0.15.18...@mux/mux-audio-react@0.15.19) (2025-12-18) ### Miscellaneous Chores * **@mux/mux-audio-react:** Synchronize audio versions ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/playback-core bumped from 0.32.1 to 0.32.2 </details> <details><summary>@mux/mux-video: 0.29.2</summary> ## [0.29.2](https://github.com/muxinc/elements/compare/@mux/mux-video@0.29.1...@mux/mux-video@0.29.2) (2025-12-18) ### Bug Fixes * Resolve infinite loading state in Safari with MSE and on-demand stream type ([#1257](#1257)) ([dadca90](dadca90)) ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/playback-core bumped from 0.32.1 to 0.32.2 </details> <details><summary>@mux/mux-video-react: 0.29.2</summary> ## [0.29.2](https://github.com/muxinc/elements/compare/@mux/mux-video-react@0.29.1...@mux/mux-video-react@0.29.2) (2025-12-18) ### Miscellaneous Chores * **@mux/mux-video-react:** Synchronize video versions ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/playback-core bumped from 0.32.1 to 0.32.2 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

generate storyboard URL after stream type is determined, avoiding Saf…

1aec18f

…ari issues using MSE & on-demand

Pintorado requested a review from a team as a code owner December 15, 2025 20:26

luwes requested changes Dec 16, 2025

View reviewed changes

simplified workaround

bf8406a

Pintorado requested a review from luwes December 17, 2025 19:29

remove line

212ef5b

vercel bot deployed to Preview – elements-demo-astro December 17, 2025 19:35 View deployment

vercel bot deployed to Preview – elements-demo-svelte-kit December 17, 2025 19:36 View deployment

vercel bot deployed to Preview – elements-demo-nextjs December 17, 2025 19:36 View deployment

vercel bot deployed to Preview – elements-demo-vanilla December 17, 2025 19:37 View deployment

vercel bot deployed to Preview – elements-demo-vue December 17, 2025 19:37 View deployment

Pintorado and others added 3 commits December 18, 2025 11:49

Merge branch 'main' into fix/mse-onDemand-safari-not-working

8caa8eb

fix test

92a886a

fix storyboard tests and type errors

6cd269d

vercel bot deployed to Preview – elements-demo-vanilla December 18, 2025 16:40 View deployment

vercel bot deployed to Preview – elements-demo-vue December 18, 2025 16:41 View deployment

vercel bot deployed to Preview – elements-demo-svelte-kit December 18, 2025 16:41 View deployment

vercel bot deployed to Preview – elements-demo-nextjs December 18, 2025 16:42 View deployment

vercel bot deployed to Preview – elements-demo-astro December 18, 2025 16:42 View deployment

luwes reviewed Dec 18, 2025

View reviewed changes

Pintorado added 2 commits December 18, 2025 15:21

remove return on getter and revert test changes

fb695c6

remove lines

32f4d40

Pintorado commented Dec 18, 2025

View reviewed changes

Pintorado requested a review from luwes December 18, 2025 18:30

luwes reviewed Dec 18, 2025

View reviewed changes

remove hasLoaded flag and use media's currentSrc instead

462a25b

Pintorado requested a review from luwes December 18, 2025 19:24

luwes reviewed Dec 18, 2025

View reviewed changes

luwes approved these changes Dec 18, 2025

View reviewed changes

luwes merged commit dadca90 into muxinc:main Dec 18, 2025
10 of 15 checks passed

github-actions bot mentioned this pull request Dec 17, 2025

chore: release main #1260

Merged

	storyboard: el.hasLoaded && el.storyboard,
	storyboard: el.media.src && el.storyboard,

Conversation

Pintorado commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Changes

Testing

Uh oh!

vercel bot commented Dec 15, 2025

Uh oh!

snyk-io bot commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

luwes left a comment

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

luwes Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Pintorado Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

luwes Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

luwes Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

luwes Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

luwes Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Pintorado Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

luwes Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

luwes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Pintorado commented Dec 15, 2025 •

edited

Loading

snyk-io bot commented Dec 15, 2025 •

edited

Loading

vercel bot commented Dec 17, 2025 •

edited

Loading

Pintorado Dec 18, 2025 •

edited

Loading