Phaser video - controls not showing

Phaser 3
1

Hello,

i’m trying to show a video in one of the intro screen of my game and I’d like to have visible the control (play/pause/volume/fullscreen) as any classic HTML video player, but somehow they are not showing. Here is the code:

  preload() {
   this.load.video(
      "video",
      `assets/videos/${this.language}.mp4`
    );
  }

  displayVideo() {
    const vid = this.add.video(
      this.camera.width / 2,
      this.camera.height / 2,
      "video"
    );

    const scale = this.camera.width / vid.width;
    vid.setScale(scale);
    vid.play(true);
     // vid.video.setAttribute("controls", "true"); tried and didn't work
     // vid.video.controls = true; tried and didn't work
    vid.setPaused(false);
  }

Any idea how to have the classical HTML 5 video controls ? thanks.

Edit: I think it’s because the HTML player is ‘inside’ the canvas, but not sure how to solve this.

2

You would use a DOMElement game object for that.

1 Like