Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
tempestz opened this issue Mar 11, 2025 · 2 comments
Open

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

tempestz opened this issue Mar 11, 2025 · 2 comments
Labels
🎞 Video

Comments

@tempestz
Copy link

tempestz commented Mar 11, 2025 •
edited
Loading

Problem

Newer versions of Phaser (v3.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 or suggestions how to work around this without rolling back my version of phaser?

Testing Setup

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/[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 = {
        type: Phaser.AUTO,
        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.

Links To Test URLs

Phaser 3.55 Test URL

Phaser 3.60 Test URL

Change Logs

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.
@tempestz
Copy link
Author

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.

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

Phaser 3.55 WEBGL Test URL
Phaser 3.60 WEBGL Test URL

@tempestz
Copy link
Author

@photonstorm do you have any advice? I see you suggested using video DOM Element in a similar issue listed below, but ideally we would like to keep the video in phaser for formatting purposes.

#6726

Appreciate your time on this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🎞 Video
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zekeatchan @tempestz