Video Dropping Frames in Android App (WebView) in Ph... | phaserjs/phaser

Nobody has claimed this yet.

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/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 = {
        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/phaser@3.55.0/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.

Start with the linked Phaser 3.55 and 3.60 test URLs and compare video playback in the Android WebView testing app. Then inspect the Phaser Video Game Object changes described in the issue and reproduce the dropped frames with the supplied example. Done means identifying the 3.60+ regression or limitation and confirming smooth playback without reverting to 3.55.

Written by the indexing model from the issue text.

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

Description

Problem

Testing Setup

Links To Test URLs

Change Logs

Contributor guide

First steps

Research direction

Assessment

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

Description

Problem

Testing Setup

Links To Test URLs

Change Logs

Contributor guide

First steps

Research direction

Assessment

Get new issues in your inbox