Can't display video

[Rodrigo]

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.

[xerver]

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]

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

[Rodrigo]

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.

[xerver]

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]

Ahhh nuts!!!! betrayed by a codepen's uploading issue.

Thanks a lot for the help. Is working now.

Best,

Rodrigo.