Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Mobile Replay]: Player flickering on Safari #82771

Closed
Tracked by #74441
c298lee opened this issue Dec 31, 2024 · 1 comment · Fixed by #82769
Closed
Tracked by #74441

[Mobile Replay]: Player flickering on Safari #82771

c298lee opened this issue Dec 31, 2024 · 1 comment · Fixed by #82769
Assignees

Comments

@c298lee
Copy link
Member

c298lee commented Dec 31, 2024

When watching replays on Safari, the video seems to flicker between clips. This is happening because the video clips itself have around a second in the beginning where it's empty. On Chrome, this is not an issue because the empty part of the video is never played, so if it's a 6 second clip and the first second is empty, the first second is skipped and only 5 seconds of that clip is played. However on Safari, the entire 6 second clip will be played, so it results in the video itself looking like it's flickering.

I've noticed this issue on all replays in the brustolin org but not the sentry-sdks org.
Example replay: https://brustolin.sentry.io/replays/c817d3d7daac4440a2788fd0cbf521b0
The third video clip in this replay and onwards contains around a second where the clip is just empty:

90_5579037_c817d3d7daac4440a2788fd0cbf521b0_2.video.mov

Note how Github doesn't let you play the empty first second of the clip. You'll be able to see the empty part if you download and play with Quicktime Player

We should fix this by ensuring that we don't have any empty parts in the video clips. However, this might take a while to fix so in the meantime, we will try to fix this in the player.

@bruno-garcia
Copy link
Member

We should fix this by ensuring that we don't have any empty parts in the video clips.

We should fix the player on Safari regardless of how the video is make. The player should be lenient (that's why on GitHub and on Chrome this works) because it's hard to guarantee videos are made properly for reasons

@c298lee c298lee closed this as completed in 9ce7ff2 Jan 3, 2025
@github-actions github-actions bot locked and limited conversation to collaborators Jan 19, 2025
andrewshie-sentry pushed a commit that referenced this issue Jan 22, 2025
To prevent flickering in Safari, we set the z-index of the clip
depending on its index. We hide all videos except the next video and the
video before that. This "fixes" the gap in the video by showing the
previous video when the gap is happening.

Example replay:
https://brustolin.sentry.io/replays/c817d3d7daac4440a2788fd0cbf521b0

Before:
Playthough with gaps


https://github.com/user-attachments/assets/49e19a85-8e38-4f03-900b-e57202db88d5

Clicking to gap
<img width="1505" alt="image"
src="https://github.com/user-attachments/assets/fd130c1d-6de1-4651-abf5-ef8d4d56d536"
/>


After:
Playthrough is smooth


https://github.com/user-attachments/assets/83db4493-fcc9-4fbc-87c3-cdccad3df823

No empty video at same timestamp
<img width="1505" alt="image"
src="https://github.com/user-attachments/assets/a1f3c6de-8607-4a38-a118-7d54a9ab72cd"
/>

Fixes #82771
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants