Phaser: is video module removed from phaser3?

[huangshengping2017]

is phaser3 still has video module?

[photonstorm]

Phaser 3 has never had video support (it wasn't removed, it was just never there in the first place) - it will be added in 2019, or if someone in the community wants to do it before then, I'd merge it in too.

[yoeleven]

I may have a possible solution I just posted in issue #3575.

[rexrainbow]

I have a video plugin, which can display video on DOM, or canvas, here is a demo.

[asukiaaa]

It took time to show fullscreen video on canvas for phaser so I leave my result.

import 'phaser'

const GameWidth = 1280
const GameHeight = 640
const FrameCenter = {
  x: GameWidth / 2,
  y: GameHeight / 2
}

export class OpeningMovie extends Phaser.Scene {
  private movieFrame: Phaser.GameObjects.Image
  private movieTexture: Phaser.Textures.CanvasTexture
  private video: HTMLVideoElement

  constructor() {
    super({ key: 'OpeningMovie' })
  }

  init(params) {
  }

  preload() {
  }

  create() {
    this.movieTexture = this.textures.createCanvas('movie', GameWidth, GameHeight)
    this.movieFrame = this.add.image(FrameCenter.x, FrameCenter.y, 'movie').setInteractive()
    this.video = document.createElement('video')
    this.video.src = '/some/movie.mp4'
    const game = this
    this.video.addEventListener('loadeddata', function() {
      this.play()
      const fps = 30
      const loop = () => {
        if (!this.paused && !this.ended) {
          game.movieTexture.context.drawImage(this, 0, 0, GameWidth, GameHeight)
          game.movieTexture.refresh()
          setTimeout(loop, 1000/fps)
        }
      }
      loop()
    })
    this.video.addEventListener('ended', function() {
      game.goNextScene()
    })
    this.video.addEventListener('pause', function() {
      game.goNextScene()
    })
    this.movieFrame.on('pointerdown', () => {
      this.video.pause()
    })
  }

  goNextScene() {
    this.video.remove()
    this.movieTexture.destroy()
    this.scene.switch('Menu')
  }

  update() {
  }
}

Thank you.

References:
https://github.com/photonstorm/phaser/issues/3575#issuecomment-455912692
https://stackoverflow.com/questions/4429440/html5-display-video-inside-canvas/38711016

[photonstorm]

As of Phaser 3.20 (currently in the master branch) there is now a native Video Game Object, which allows for live video streams, or local video file playback, and streaming to texture. Please check out 3.20 for this feature.