Seamless cut to video and back?

[dmko]

To go from PIXI to a video render and back to PIXI, what would be the best way - assuming the first frame of the video visually corresponds to the PIXI state? (it's not an exact match, let's say like black and white vs. colored version)

Is there a way to pre-load the video and have it like paused and ready to instantly show? I don't mind if it hangs on the first frame for a bit before it actually plays.

Assuming the answer to that is somehow yes - is there a way to do that without actually pre-loading the whole thing? Kinda like the way PIXI can start playing (with a small wait) before the video finishes downloading.

Now that I'm at it... one more question. How does the performance of VideoBaseTexture compare to native HTML5 video, on a technical level? I had a bit of stuttery playback on iOS but not sure if it's the pipeline's fault (might have been the video encode itself, or just plain playing video in a mobile browser, etc..)

I'm using the scaleToWindow function at https://github.com/kittykatattack/scaleToWindow in case it makes a difference (could that affect performance?)

Here's my current barebones code to start from in case it helps:
 

function PlayReward() {
      
      var texture = PIXI.Texture.fromVideoUrl(['video.mp4' ,'video.ogv']);
      var videoSprite = new PIXI.Sprite(texture);

//canvas size is 1024x768, this plays over the top portion only

      videoSprite.width = 1024;
      videoSprite.height = 576;
      stage.addChild(videoSprite);
}

And my startup code is like:

 

//elsewhere, exports.Init() is called via the containing module... this could be a bit prettier just haven't gotten around to that yet

exports.DoScaleWindow = function() {
      exports.windowScaleRatio = scaleToWindow(exports.renderer.view, _bgColor);
  }

  exports.Init = function(canvasWidth, canvasHeight, bgColor) {
      exports.canvasWidth = canvasWidth;
      exports.canvasHeight = canvasHeight;

      _bgColor = bgColor;

      exports.renderer = PIXI.autoDetectRenderer(canvasWidth, canvasHeight);
      document.body.appendChild(exports.renderer.view);


      exports.stage = new PIXI.Container();

      requestAnimationFrame(mainGameLoop);

      exports.DoScaleWindow();
      window.addEventListener("resize", exports.DoScaleWindow);
  }



  //MAIN
  function mainGameLoop() {
      requestAnimationFrame(mainGameLoop);
      exports.renderer.render(exports.stage);
  }

Thanks!

[dmko]

Uhoh, video fails in ie11.... I saw another post about rendering to canvas or something.... anyone have a cross-platform code snippet to just make video work?  Preferably with looping and "end of playback" detection