[Mobile Replay]: Video disappears when pausing on Safari

[c298lee]

Sometimes when pausing a video replay on Safari, the video seems to disappear. Additionally, the video sometimes disappears after several seconds when it's not being played. When inspecting, video element is still there and it still has display:block but it's not visible. Changing the display attribute makes it visible again.

Screen.Recording.2024-12-31.at.3.32.33.PM.mov

This only happens on Safari and I've so far only seen it within the replays in the brustolin org. I've tested on a simple create react app and have not run into this bug. I have been able to reproduce this on Sentry stories with a third party video, so it seems like something within Sentry is causing this. Reducing down the Sentry storybook page until the video functions as normal should lead to the root cause of the bug.

[c298lee]

Scenarios that do and don't recreate the bug:
To test: Add the controls attribute to the <video> tag and click play, wait 1 second, the click pause. Once pause is clicked, the video disappears right away
Creates the bug:

• Video from SDK in a *.stories.tsx file, with storyBook() wrapper with the <ReplayPlayer>
• Video from SDK in a *.stories.tsx file, with storyBook() wrapper with the <ReplayPlayer> with changes to the ReplayPlayer class
• Video from SDK in a *.stories.tsx file, with storyBook() wrapper inside a raw <video> tag
• Video from SDK in a *.stories.tsx file, without storyBook() wrapper inside a raw <video> tag
• MP4 found online in a *.stories.tsx file, without storyBook() wrapper inside a raw <video> tag
• MP4 found online inside a raw <video> tag replacing everything in app/main.tsx
• MP4 found online inside a raw <video> tag imported asychronously like app/main.tsx from Sentry in a create react app

Note: When the page first loads this bug doesn't always happen, but after a few reloads it does. When looking at replays on Safari, it doesn't always happen, but when it does, the bug is pretty jarring since the video disappears.
Speculation on what might be causing this:

• new tabs vs old tabs
• Safari preference for battery saving

Doesn't recreate the bug:

• MP4 found online inside a raw <video> tag in a create react app
• Two MP4s found online inside a raw <video> tag in a create react app on the same page
• MP4 found online inside a raw <video> tag in a create react app with HTML only from Sentry stories
• MP4 found online inside a raw <video> tag in a create react app with HTML and CSS from Sentry stories
• Video from SDK inside a raw <video> tag in a create react app

[c298lee]

Next step:
I'm going to try the following scenarios until the bug is reproduced:

1. MP4 found online inside a raw <video> tag in a create react app with HTML and CSS from Sentry stories
2. MP4 found online inside a raw <video> tag in a create react app with <video> imported asynchronously like StoriesContext and StoryFile

Step 1 did not result in the bug being reproduced. I decided not to do exactly step 2, but I did something which had the same underlying idea of importing the video asynchronously instead since there was a lot of types and components which needed to be ported over to get StoriesContext and StoryFile working.

Instead, I found that replacing app/main.tsx in Sentry with the mp4 found online inside a raw <video> tag still reproduced the bug, so I decided to copy how main was rendered in the cra app. I copied over app/index.tsx, app/bootstrap/initalizeMain.tsx, app/bootstrap/initalizeApp.tsx, app/bootstrap/renderMain.tsx, and app/bootstrap/renderDom.tsx from Sentry and removed all parts that were not relevant to initializing and rendering main.tsx. Recreating what was happening in Sentry with just the mp4 video in app/main.tsx lead to the bug being reproduced in the CRA!

My theory is that dynamically importing the file containing the video causes this bug, more investigation is needed to verify this.

[c298lee]

We uploaded a video found online encoded as an mp4 and as a webm in a *.stories.tsx file, without storyBook() wrapper inside a raw <video> tag . With most video formats, we were able to reproduce the bug but a few video formats (webm) played the video without the bug.

Video formats that repros the bug on Safari:

• mp4
• mov
• mpeg
• m4v
• hevc in mp4

Video formats that don't repro the bug on Safari:

• webm

My theory is that webm doesn't reproduce the bug while the other formats do because webm is the only format tested that did not result in safari sending a range header request for the video.
webm:

mp4 (same applies to the other video formats):

We haven't found why some formats (eg. mp4) works on the create react app, but not on Sentry.