Video Dropping Frames in Android App (WebView) in Phaser 3.60+

Phaser 3
1

Newer versions of Phaser (3.60 and on) seem to be dropping video frames when opening my phaser project in an Android app’s WebView. In other words, if I try to open my project, which is hosted online, from within an Android app I am see video frames consistently dropped. Any idea why this is happening?

Video resolution: 480x360 Video size: 529KB Android:15

To test I am using this WebView Testing app, which just allows you to open a URL within Android.

And this simple video play code:


<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
    <script>
    class Example extends Phaser.Scene
    {
        constructor ()
        {
            super();
        }

        preload ()
        {
            console.log("Loading");
            this.load.video('video_1', 'test_video.mp4', true);
            this.video;
        }

        create ()
        {
            this.video = this.add.video(this.cameras.main.centerX, this.cameras.main.centerY, 'video_1');
            this.input.on('pointerdown', () => {
                this.video.play();
            });
        }
    }

    const config = {
        renderer: Phaser.CANVAS,
        width: 480,
        height: 320,
        scene: Example,
    };

    let game = new Phaser.Game(config);
    </script>
</body>
</html>

The video runs fine if I roll back the phaser version:

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.0/dist/phaser-arcade-physics.min.js"></script>

Adjusting the renderer does not seem to have an effect in newer versions.

Thanks!

2

this happens to me too, Have you found any solutions?

3

I’ve tried roll back the to version 3.55 in my package.json, install again but still got the same result, it’s looks like video is very lagging in Android app (web view)

4

@T0ruKun I’ve been using 3.55 without issue thus far. You can add Video DOM Element or even convert the video to a sprite sheet if you’re stuck. How are you testing it?

I’ve looked through the v3.60 change log at the video game object updates:

New Feature - Video Game Object
…
The VideoFile Loader File Type now does nothing more than inject a simple small object to the Video Cache. Previously, it would create a Video DOM Element, try to load it as a blob and all kinds of other things. This lead to lots of errors, especially when loading multiple videos at the same time (as the browser would run out of Video elements to use). Under v3.60 each Video Game Object is responsible for its own unique Video DOM element, allowing for much better control and reliability.

Video Game Object Bug Fixes
…
The Loader would intermittently not finish loading a video file. This often happened if you queued too many videos at once. Under v3.60 Videos are no longer preloaded at all, instead the Video Game Object manages all of this, meaning this issue no longer happens. Fix #4910

The language here is confusing, “Under v3.60” suggests versions before v3.60 but I believe the documentation is referring to v3.60.

In my Android test case, text renders onscreen as expected, but video frames consistently drop. To me this suggests the video is not buffered correctly.

5

Updating the config dictionary with type: Phaser.CANVAS allows the video play smoothly.

Phaser.AUTO defaults to WBGL, which indicates Android WebView’s WEBGL rendering is clunky in this case.

Why would WEBGL performance fall off so much in Android with this update? Maybe there are settings I am missing?