Rodrigo Posted December 2, 2016 Share Posted December 2, 2016 Hi, I'm having some issues trying to load and display an MP4 video in a sprite, which also need to loop endlessly. I'm using the loader class in order to be sure that the video is loaded. The video is loaded and I don't get any errors, but the video is not showing. Then I try using the code from the samples page and I can hear the video, but I can't see it (codepen sample line 53 through 78, comment out the other code first). Also I want to loop the video and I used the code I found in this issue: https://github.com/pixijs/pixi.js/issues/1872 But this code doesn't returns the HTML video element: var video = texture.baseTexture.source; So it doesn't have a loop property on it. To confuse me even more, I tried the loader code with a newest version (currently working with 4.0.3) and from version 4.1.0 and up I'm getting errors when I try to create the video texture: Uncaught TypeError: source.addEventListener is not a function(…) pixi.js:23585 In that case all I have in the loader callback is this: function loaderComplete(){ console.log( videoLoader.resources.testVideo ); // on load complete create the video texture var videoTexture = PIXI.Texture.fromVideo(videoLoader.resources.testVideo); } And also tried to create a video base texture but I get the same error. Here is a simple codepen sample: http://codepen.io/rhernando/pen/a556304479d6a44bfa5b698e40b18307/?editors=0010 As you can see I'm not getting any errors on loading the video, and the video is actually loading. In fact I added an image to the loader and I had no problems with that. The issue appears with the video. Thanks, Rodrigo. Quote Link to comment Share on other sites More sharing options...
xerver Posted December 2, 2016 Share Posted December 2, 2016 This is because in the v1 of the resource loader (which is what pixi uses), there were no built-in mappings for video file extensions. Just add one, and it works fine: PIXI.loaders.Resource.setExtensionLoadType('mp4', PIXI.loaders.Resource.LOAD_TYPE.VIDEO); Now with that your resource is loading properly, the next issue is that you are passing the resource object into fromVideo which is incorrect. The resource object is a wrapper around a loaded resource. To get the thing it actually loaded (the video) use the .data property: var videoTexture = PIXI.Texture.fromVideo(videoLoader.resources['testVideo'].data); At this point everything should be working fine, except for your pen is using an old version of PIXI where there was a bug with BaseTextures handling videos correctly. Updating to the latest should solve that problem for you. Rodrigo 1 Quote Link to comment Share on other sites More sharing options...
Rodrigo Posted December 2, 2016 Author Share Posted December 2, 2016 Thanks for the answer and the great info Xerver. But the video still doesn't show. It loads, I can access and loop it and it sounds, but I can't see it: http://codepen.io/rhernando/pen/a556304479d6a44bfa5b698e40b18307/?editors=0010 When I log the sprite, the width and height are NaN Quote Link to comment Share on other sites More sharing options...
Rodrigo Posted December 2, 2016 Author Share Posted December 2, 2016 Hi, Even this code (from the samples page) doesn't show the video: var renderer = PIXI.autoDetectRenderer(800, 600, { transparent: true }); document.body.appendChild(renderer.view); // create the root of the scene graph var stage = new PIXI.Container(); // create a video texture from a path var texture = PIXI.Texture.fromVideo('https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/SampleVideo.mp4'); texture.baseTexture.source.loop = true; // create a new Sprite using the video texture (yes it's that easy) var videoSprite = new PIXI.Sprite(texture); setTimeout(function(){ console.log(videoSprite.width, videoSprite.height); console.log(videoSprite); },5000); videoSprite.width = renderer.width; videoSprite.height = renderer.height; stage.addChild(videoSprite); animate(); function animate(){ // render the stage renderer.render(stage); requestAnimationFrame(animate); } After 5 seconds, when the video is already loaded and playing the sprite dimensions are NaN. Quote Link to comment Share on other sites More sharing options...
xerver Posted December 3, 2016 Share Posted December 3, 2016 You should look at the video, it is blank. So I wouldn't expect you to see anything: https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/SampleVideo.mp4 You are getting NaN sizes, because the size of the video is 0x0 and when you set the width/height of a sprite it does this: https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js#L483-L486 Since texture's width is 0, you get a scale of "Inifinity" resulting in a "NaN" width. Rodrigo 1 Quote Link to comment Share on other sites More sharing options...
Rodrigo Posted December 3, 2016 Author Share Posted December 3, 2016 Ahhh nuts!!!! betrayed by a codepen's uploading issue. Thanks a lot for the help. Is working now. Best, Rodrigo. 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.