Videos play poorly on first play, especially on Safari. Preload not working?

Hi everyone. I'm having real issues getting video to playback consistently.

I am using short videos to transition between layouts in my game. The first time a video plays, performance is choppy and there is a strange glitch in Safari when it seems to repeat a flash frame at the end.

Once a video has played once however, repeat plays are buttery smooth.

The videos are very short and small and Ive tried all kinds of variations in bitrate, frame rate etc. Nothing seems to make any difference.

It appears that the 'preload' function of the videos isn't working and that they only load on play. And that for some reason first playback is poor. This seems to happen on all browsers however Safari is much worse than Chrome.

Here is a link to a small project that will demonstrate the issue:

dropbox.com/s/6h6y2szw2enmcsp/VideoPlaybackTest_v1.c3p

Can anyone please tell me what I'm doing wrong and if there's a way to get better video playback performance on videos the first time they are played?

Our game uses video transitions a lot as you can see so we'd really like to get to the bottom of this if we can. All help greatly appreciated! Thanks!

(current video encoding settings are: H264 mp4 / main profile VBR 3Mbs / 1600x900 / encoding from After Effects in Adobe Media Encoder)

Hello, I tested your demo and everything was working really fine, using Edge (I suspect it is similar to Chrome, both based on Chromium). I don't think it is a video size problem either, considering both your vids are even smaller in size than some pngs, so ultimately it could just be a Safari thing.

I'm sorry I don't have any solution, just post here to confirm that your transition vids are not the root of the problem.

Thanks for testing — Really appreciate that.

Yes performance is Chrome is pretty good. I can see a tiny difference in smoothness between 1st and 2nd plays of the same video so I guess it's still not preloading fully. Chrome just does a far better job of streaming and buffering.

So far the best solution I've come up with for Safari is to encode all the videos at 60fps (so at least the stutter is less noticeable).

The even weirder thing for Safari is that I've currently had to implement a layer underneath the video that turns on once the video above starts to play that has the last frame of the video on it as a still. This is because Safari seems to get to the end of the video - hide the video layer as intended, then flash up the last frame again for a few frames for no reason and then hide it again! Which again - doesn't happen on the 2nd play of a video so seems also to be tied to the buffering / preload issue.

I just wonder if the preload function is not working as intended or I'm just misunderstanding what it's supposed to do? It's frustrating to see the videos play so well on the second viewing and not be able to get that same experience for players on the first play.