MOV Video Not Supported - MacOS/Safari 'No Supported Format' Error

Phaser 3
1

Hi everyone,

I’m working on a project using Phaser 3 on MacOS, and I’m trying to load a video file in MOV format. However, I’m encountering the following error:

VideoFile: No supported format for test_mov_video
phaser.js:128609  Uncaught TypeError: Cannot read properties of null (reading 'type')
    at new VideoFile2 (phaser.js:128609:34)
    at LoaderPlugin2.video (phaser.js:128729:22)
    at LoaderPlugin2.addPack (phaser.js:119169:34)
    at PackFile2.onProcess (phaser.js:126079:21)
    at LoaderPlugin2.nextFile (phaser.js:119537:18)
    at PackFile2.onLoad (phaser.js:118110:21)

Is there a way to get MOV videos to play in video component? Any suggestions for possible workarounds would be greatly appreciated.

I’m mainly trying to do this because I need to play videos with an alpha channel on MacOS and iOS.

I am using such MOV videos that work on other websites (without Phaser).

For example MOV from this website - Safari all works.

https://css-tricks.com/overlaying-video-with-transparency-while-wrangling-cross-browser-support

Video for download, this video is from the website and work only on MacOS:

https://doggo.s3.amazonaws.com/output.mov

Any suggestions for possible workarounds would be greatly appreciated, Thanks a lot for your help!

2

Something like this can work:

new Phaser.Game({
  callbacks: {
    preBoot: function (game) {
      const vid = document.createElement('video');

      game.device.video.mov = vid.canPlayType('video/quicktime') !== '';

      console.info('game.device.video.mov', game.device.video.mov);
    }
  }
});

An alternative is video in DOM Element Game Object.

Device video support (according to Phaser)

3

HEVC movie as game object

HEVC movie in DOMElement

4

Hello, thank you very much for your help! I’m trying to solve this with the DOM element for now until it gets fixed. As you posted the last two examples, in the first example, do you see the video with or without alpha?

5

Both appear with alpha for me.

dog as game object
dog as game object360×480 166 KB
dog as dom element
dog as dom element360×480 239 KB

6

Unfortunately I don’t have the same result in the first example.

Snímek obrazovky 2024-10-26 v 20.37.27
Snímek obrazovky 2024-10-26 v 20.37.27801×1592 59.3 KB

Verson Safari 18.0.1 (20619.1.26.31.7)
MacBook Air M1, 2020
MacOS Sequiola: 15.0.1

Thanks

7

That may be unavoidable, but I don’t really know. Try the Canvas renderer too just in case.