[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

Also tried doing the following things, but had no effect on or didn't fix the bug:

• Adding a poster to the video
• Adding the following styles to the video: background, background-color, width
• Adding and removing or changing the following video attributes: muted, playsInline, autoplay, preload
• Emptying cache using Safari > Develop > Empty Caches
• Adding load() when pausing the video
• Adding fastseek() when pausing the video
• Preloading videos using <link rel="preload" href="path/to/video.mp4" as="video">
• Forcing one network fetch request instead of the range header request by getting the video as a buffer

[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.

[billyvg]

@c298lee When you say that you use a video found online, do you mean you downloaded it locally and served it via your local dev environment? vs taking the direct URL of the remote video and using that as the src?

[c298lee]

@c298lee When you say that you use a video found online, do you mean you downloaded it locally and served it via your local dev environment? vs taking the direct URL of the remote video and using that as the src?

@billyvg I've done both 😅 at the beginning I was using the direct URL of a remote video and using that as the src, but I have it downloaded now. For both scenarios, the video plays and pauses fine on a create react app but not on Sentry

[c298lee]

I retested the following scenario after rebuilding and found that I was unable to reproduce the bug: MP4 found online inside a raw

It seems like once a bug appears in a tab, changing the underlying code has no affect on the bug with the exception of changing the video format. This means that once a scenario results in the bug appearing, everything else tested in that tab will also have the bug. Hence, I will retest all relevant scenarios in different tabs and rebuild each time to ensure that the results are correct.

This bug is hard to test since the bug doesn't always appear on first page load, but it eventually appears with time. Once the bug appears it happens very consistently.

[c298lee]

We are going to try solving this by transcoding the video from a mp4 to webm. This is because the bug is hard to reproduce since it could take a while for the bug to appear, and changing they underlying code in a tab with a buggy state does not fix the bug, with the exception of using a webm video. Playing a webm video instead of a mp4 video has been the only consistent way the video has played without any bugs. I will be making a proposal for this since there are some concerns with transcoding the video on the server and it's not possible to do this on the SDK side since iOS doesn't support webm.

[c298lee]

This bug happens a lot on dev, but very rarely on production. Since this doesn't happen often on production, transcoding is a very heavy handed approach. The proposal for transcoding is here in case we get customer complaints about this issue and need to revisit this. Closing this issue for now since this bug happens very rarely, so not worth the cost to keep investigating for a less heavy handed solution