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

Phaser 3 Video lagging on "old" iOS versions #6726

Closed
AlexandreK38 opened this issue Feb 2, 2024 · 2 comments
Closed

Phaser 3 Video lagging on "old" iOS versions #6726

AlexandreK38 opened this issue Feb 2, 2024 · 2 comments
Labels
💸Mac OS 📱 Mobile 🎞 Video

Comments

@AlexandreK38
Copy link

AlexandreK38 commented Feb 2, 2024 •
edited
Loading

Version

  • Phaser Version: 3.70, tried on 3.60 too
  • Operating system:
  • Safari on iOS 12, 13, 14
  • Browser:
    Safari iOS

Description

Hi,
I added video and play it automatically on a scene.
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, iPhone 11 Pro Max running iOS 13 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 Test 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/[email protected]/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>

Note that the mp4 video is just a 30 seconds of 2 MB, and if we toggle the sound on we can hear the sound and if we add a progress bar of the video, it will be updated. It is like the display isn't following fast enough the video.
@AlexandreK38 AlexandreK38 changed the title Phaser 3 Video lagging on "old" iOS devices/versions Phaser 3 Video lagging on "old" iOS versions Feb 3, 2024
@AlexandreK38
Copy link
Author

AlexandreK38 commented Feb 5, 2024 •
edited
Loading

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

@photonstorm
Copy link
Collaborator

I'm not sure there's anything we can specifically do about this. Videos are played using the video tag and we capture each frame and store it in a WebGL texture. The larger the video (in resolution, not file size) the more GPU grunt power is required to do this. The older the device, the more effort it requires. I would recommend for those devices using the Rex Video Plugin, as it will essentially use a video dom object and skip capturing it to a WebGL texture, much like your experiment did.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 2, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
💸Mac OS 📱 Mobile 🎞 Video
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@photonstorm @AlexandreK38 @gammafp