Performance Issue on Safari

Help & Support
1

Dear Playcanvas-Team,

I’m experiencing camera animation stuttering and slow video playback of this scene on some Safari installs. Here is the published version: https://playcanv.as/e/p/0xeELven/
If it’s reloaded after playing every video it plays fine on Safari.

Safari v14.1.1 macOS 10.14.6

Editor Project: PlayCanvas | HTML5 Game Engine

What can I do to fix the stuttering of the animation and the video on the first load?

Thanks,
Martin

2

I’m not really seeing the issue on my iPhone XR

Or Safari Version 14.1.1 (15611.2.7.1.6, 15611)

Can you share a clip of the issue please?

3

Tested on a MacBook Air:

OS: 10.13.6
Safari: 13.1.2

Everything seemed fine to me, though testing on a different laptop that I have specifically linked to a slower network had heavy stuttering as the browser struggled to load the video.

I’ve noticed other video examples set the video DOM element’s preload attribute to true. Could that have something to do with it?

4

I was wondering if it’s due to when videos are first accessed, it’s when the texture is uploaded to the GPU which has some cost to it :thinking:

Wondering if it’s possible to reproduce in a smaller project

5

Thanks for your replies Steven and eproasim :slight_smile:

Yes, will do soon.

I set all videos to preload in the editor. Will try to set preload in the video DOM to true as well.

All loading happens in the video-tex.js script. No sure if my play on promise code (linenr 116) has an influence on this issue. On quite a few old mac books with slower internet connection it works without any problems :thinking:

6

Can you try this build to see if it’s better? Extreme_E_Garage forums - PLAYCANVAS

7

This one has the same issues, sorry.

Here is a screencast of the stuttering: Bildschirmaufnahme01.mov - Google Drive

8

I can’t reproduce the issues unfortunately which doubly makes it harder to suggest what could be causing the issue. :thinking:

9

I wonder if all the alpha backgrounds fading in and out could be the issue :thinking:

Can you disable all the videos and see if issue still happens?

10

Good idea. I’m made the opposite, just disabled any fading to see if that’s the cause for it. Build w/o fading: Extreme_E_Garage_v01_0_EN_Per2
Will have the test results soon.

I have the same problem, I need to send it to my colleague and wait for the response. :expressionless:

11

Unfortunately, the problem is still there.

Interestingly the video & animation is smooth if you click a second time on the hotpsot. So I guess it has something to do with initialisation… hmm really difficult.

12

Sounds like it is probably due to when the video starts playing as that’s when it’s added as a texture source to the material. I’m wondering if you can add the texture source to the material as part of the preload/startup flow rather than on first play?

13

Hi @MSulzer,

Could you try this test and let me know your results? It improved performance on the laptop I had on the slower network:

2 Likes
14

Actually nevermind.

Upon watching the network monitor in Firefox, I’m noticing that stuttering begins for me after the initial video starts as the browser inserts a significant number of video elements into the DOM and initializes the GET requests for them. I’m wondering if it might be better for you to have a single media player script that creates only a single texture and you just change the video src on that texture as the video is needed.

Since you only play one video at a time, this will reduce the strain on the browser having to queue up all of the separate video elements. I can show you an example, if you like, of what I do.

2 Likes
15

That would be wonderful!