phina.jsでvideoをcanvasに読み込む方法

かなり不完全ですがご参考までに

video.js

const VIDEO_WIDTH = 250;
const VIDEO_HEIGHT = 150;

phina.define('MainScene', {
  superClass: 'DisplayScene',
  init: function(){
    this.superInit();
    var canvas = VideoCanvas();
    Sprite(canvas)
      .addChildTo(this)
      .setPosition(this.gridX.center(), this.gridY.center());
  }
});

phina.define('VideoCanvas', {
  superClass: 'Canvas',
  init: function(){
    this.superInit();
    const width = VIDEO_WIDTH;
    const height = VIDEO_HEIGHT;
    this.setSize(width, height);

    const video = document.createElement('video');
    document.body.appendChild(video);
    video.src="video.mp4";
    video.playsInline = true;
    video.style.display = "none";
    video.play();

    var self = this;
    (function canvasVideoPlay(){
      self.drawImage(video,0,0,width,height);
      requestAnimationFrame(canvasVideoPlay);
    })();
  },
});

phina.main(function() {
  var app = GameApp({
    startLabel: 'main',
  });
  app.run();
});