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

Question

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 seeing 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: https://play.google.com/store/apps/details?id=com.snc.test.webview2&hl=en_US

And this simple video play code:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/phaser-arcade-physics.min.js"></script>

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

Thanks!

May be worth checking both open and closed PhaserJS issue tickets. As written (with more detail about video file format & which device(s) tested on) seems like a project regression. — Morrison Chang
– Morrison Chang, Commented Feb 28 at 23:17
@MorrisonChang is wright, you would have to open a ticket. if you check the changelog from version 3.6 it states: "...Brand new Video Game Object handles videos and media streams with ease...." — winner_joiner
– winner_joiner, Commented Mar 1 at 7:01
btw.: do you notice issues, with a phone or other device? maybe the issue has to do with the tester tool. — winner_joiner
– winner_joiner, Commented Mar 1 at 7:10
@winner_joiner good tips. I checked the changelog affecting the video element "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. " Maybe Android is not recognizing the Video Cache as a DOM Element under the new loading method? In my test case, text renders onscreen as expected, but video frames consistently drop, suggesting the video is not buffered correctly. I have tested on an Android tablet and had the same result. — boogie_bullfrog
– boogie_bullfrog, Commented Mar 11 at 15:49
@boogie_bullfrog a possible a "workaround", if the video works with normal html, you could overlay an htmlvideoelement or similar. Or you can use Phaser DOMElement — winner_joiner
– winner_joiner, Commented Mar 12 at 9:47

winner_joiner · Accepted Answer · 2025-03-13 06:54:43Z

0

Well now I tried i myself, I can say it is a "WebView Test" issue not a phaser-framework issue. I open the the provide code in the "WebView Test" (with an 1.5 MB video file) and I also get clear frame-drops, the video is really choppy. (if I hade seen this before I would have right away said it cant be phaser).

When I start the same Website on the same phone in Chrome and Opera browser, the video runs smooth without any issue. So the conclusion has to be, that the "WebView Test" has some issue with phaser's html video handling.
(side note: I inlined the same video, in the HTML page, in the "WebView Test" it didn't play, but in the browsers it did. This also supports my conclusion)

btw.: because I just noticed it in your config you would have to write mode: Phaser.CANVAS, not renderer: Phaser.CANVAS, (link to documentation)

edited Mar 13 at 6:54

answered Mar 12 at 16:51

winner_joiner

15.3k4 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

boogie_bullfrog Mar 13 at 17:18

Updating the config dictionary with type: Phaser.CANVAS allows the video play smoothly. Phaser.AUTO defaults to WBGL, which may indicate Android WebView's WEBGL rendering is clunky in this case. Unfortunately, the CANVAS renderer is causing other issue in my project beyond this test case - nineslice objects are not showing up and some of my text looks funky

boogie_bullfrog Mar 13 at 17:42

Why would WEBGL performance fall off so much in Android WebView with this update? Android is not changing, which indicates it on the phaser side

winner_joiner Mar 13 at 19:22

Well you are wright something strange is going on, I created a cordova application with the code (and both mode CANVAS/WEBGL). I takes a long while to start the video (a few seconds) and the video is choppy. In the browsers I tested any version seems to run smooth (and onload the videos run fast). I just can assume they are using a different webview / Components, or some other optimizations. But It is really strange, the cordova, result confuses me. Maybe it simply that phaser is using a "new" html feature, that causes this issues.

winner_joiner Mar 13 at 19:23

btw.: have you tried asking in the phaser discourse forum? There the dev's might have better insides.

boogie_bullfrog Mar 14 at 4:57

Yes, I've posted on the discourse and submitted and issue on the phaser GitHub page: github.com/phaserjs/phaser/issues/7075

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related