Video lagging on "old" iOS versions

Phaser 3
1

Hi!
I’m relatively new to Phaser 3 and I wanted to add a video and play it automatically. While it plays well on my desktop using Chrome or Safari, on devices like iPhone 6 running iOS 12 or an iPhone X running iOS 14.5 it is almost not playing at all, a few frames and then the frames are not updating. It is displaying without issue on an iPhone 11 Pro running iOS 16.6.

Example code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.min.js"></script>
</head>
<body>
    <style>
        body {
            margin:0px;
            padding:0px;
            background-color: black;
        }
    </style>
    <script>

    class TestScene extends Phaser.Scene
    {
        preload ()
        {
            this.load.video('preview', 'preview.mp4');
        }

        create ()
        {
            let video = this.add.video(0,0, 'preview');
            video.setOrigin(0,0);
            video.setMute(true);
            video.play();
        }
    };

    const config = {
        type: Phaser.WEBGL,
        scene: [TestScene],
        backgroundColor: '#FFFFFF'
    };
    const game = new Phaser.Game (config);
    </script>
</body>
</html>

I tried on phaser versions 60 and 70.

Is there a setting or something making lagging like this? It is like the rendering doesn’t follow the video.

2

I tested a bit more and displaying a video in the page using <video> tag is working, so then I tried switching the config type to Phaser.CANVAS and it’s playing well too.
I guess the issue is the video with the WEBGL renderer