Jump to content

Seamless cut to video and back?


Recommended Posts

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;

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);

      exports.stage = new PIXI.Container();


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

  function mainGameLoop() {


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...