rohde Posted June 9, 2015 Share Posted June 9, 2015 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> Quote Link to comment Share on other sites More sharing options...
xerver Posted June 9, 2015 Share Posted June 9, 2015 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 Quote Link to comment Share on other sites More sharing options...
rohde Posted June 12, 2015 Author Share Posted June 12, 2015 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. Quote Link to comment Share on other sites More sharing options...
xerver Posted June 12, 2015 Share Posted June 12, 2015 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.