Jump to content

Can't display video


Recommended Posts


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:


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:


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.



Link to comment
Share on other sites

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.


Link to comment
Share on other sites


Even this code (from the samples page) doesn't show the video:

var renderer = PIXI.autoDetectRenderer(800, 600, { transparent: true });

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

	console.log(videoSprite.width, videoSprite.height);

videoSprite.width = renderer.width;
videoSprite.height = renderer.height;



function animate(){

    // render the stage


After 5 seconds, when the video is already loaded and playing the sprite dimensions are NaN.

Link to comment
Share on other sites

You should look at the video, it is blank. So I wouldn't expect you to see anything:


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:


Since texture's width is 0, you get a scale of "Inifinity" resulting in a "NaN" width.

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