Jump to content

Video playback in v3?


rohde
 Share

Recommended Posts

I'm a bit of a Pixi-noob, set with the task of maintaining a Pixi-based solution.
From what I've read, upgrading from v2 to v3 should be a walk in the park. This has not been my experience so far (possibly because of my limited Pixi skills).
 
The problem I'm encountering at the moment is getting a video to play. Using Pixi.VideoTexture worked fine. But when I attempt to use the new Pixi.VideoBaseTexture I get this for every call to render().
 

TypeError: this.children[i].updateTransform is not a functionat Container.23.Container.updateTransform (pixi.js:6904:26)at CanvasRenderer.43.CanvasRenderer.render (pixi.js:12408:12)at animate (index.html:31:15)
Below is the simple test that does not work. I have tried using both fromVideo and fromUrl.
Does anyone have any working samplecode for using VideoBaseTexture?
The doc at http://pixijs.github.io/docs/PIXI.VideoBaseTexture.html points to "the 'deus' demo", which is a v2 sample using Pixi.VideoTexture, and so is every other sample I have found.
 

<!doctype html><div id="samplevideo"></div><video id="videoelement" width="200" height="200" style="display: none;">  <source src="sample.mp4" type="video/mp4"></video><script src="pixi.js"></script><script>//var videoTexture = PIXI.VideoBaseTexture.fromUrl('sample.mp4', PIXI.SCALE_MODES.DEFAULT);var videoTexture = PIXI.VideoBaseTexture.fromVideo(document.getElementById("videoelement"), PIXI.SCALE_MODES.DEFAULT);var imageTexture = new PIXI.Sprite.fromImage("sample.jpg");var stage = new PIXI.Container();stage.addChild(videoTexture);var rendererOptions = {    antialiasing:true,    transparent:true,    resolution:1};var renderer = new PIXI.CanvasRenderer(200, 200, rendererOptions);document.getElementById("samplevideo").appendChild(renderer.view);function animate() {  requestAnimationFrame (animate);  try  {     renderer.render(stage);  }  catch(err)  {  console.error(err);  }}requestAnimationFrame (animate);</script>

 

Link to comment
Share on other sites

1) You cannot add textures to a container to be rendered, they only describe images for sprites which are then added to the stage.

 

Meaning this is invalid: stage.addChild(videoTexture);

 

2) There is a difference between a Texture and a BaseTexture. A BaseTexture is a source of a texture (image, video, canvas, etc). A Texture is a frame of that source. A Sprite is a positional object that tells how to draw a texture.

 

Your video texture needs to be a texture, not a base texture and you need to put your video texture into a sprite, then add that to the stage:

var videoTexture = PIXI.Texture.fromVideoUrl('smaple.mp4'); // notice I am using the Texture method, not the base texture methods.var videoSprite = new PIXI.Sprite(videoTexture);stage.addChild(videoTexture);
http://pixijs.github.io/docs/PIXI.Texture.html
Link to comment
Share on other sites

Ahh, ok, I simply searched for "video" for something to replace my VideoTexture. But the Texture class being generalized to also handle video is a nice detail actually.

Thanks for explaining.

 

Well that isn't exactly true, it worked that way in v2 as well the API was just confusing. BaseTexture is a source of something to draw: image, canvas, video, etc. The Texture is a frame into that source. Texture doesn't "deal with videos" at all, it doesn't deal with any source. The BaseTextures do that.

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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