[PIXI] Loading Video files?

[d13]

Hello,

 

Could anyone out there suggest the best-practise for loading and accessing video files with Pixi?

 

I understand that the current version of Pixi's loader doesn't support loading videos.

So it seems that the only way to load and use them is to use the `fromVideo` and `fromVideoUrl` methods.

Because video files tend to be huge, is there any way to monitor load progress or fun a callback when they're loaded?

 

Thanks!

 

[xerver]

Sure, just like audio there are basically two methods:

1. Load all the data up front as a blob, and play it as a video.

2. Use the <video/> tag and let the browser buffer and listen for "canplaythrough" and other methods to know what to do when (hint: this is what the video base texture does for you, thats how it starts playing without having downloaded the entire video yet).

[d13]

1. Load all the data up front as a blob, and play it as a video.

Oh, can I just use Pixi's loader for this?

Can I then set that loaded video as a sprite texture?

[xerver]

Yes the loader can load video files, it will load them as a "<video/>" element. The same as audio or an image with their respective tags.

You can then create a VideoBaseTexture with the element loaded. That is the only missing piece, there is no parser in pixi to automagically create the base texture for you, but the loading of a video has been in the loader since 1.0

[d13]

VideoBaseTexture 

Oh, thanks, I didn't know about that!

 

http://pixijs.github.io/docs/PIXI.VideoBaseTexture.html

 

I will follow your suggestions and try and get a working implementation running.

[d13]

Hello again!

 

I've trying a few different configurations, but so far, haven't been able to make it work.

 

Here's my current test code:

 

I'm loading the video like this.

loader  .add("video/testVideo.mp4")  .load(setup); 

This works, and when the file loads it calls the `setup` function.

I've tried to create the video sprite in the `setup` function like this:

function setup() {  let videoTexture = PIXI.VideoBaseTexture.fromUrl[{src: "video/testVideo.mp4"}];  let video = new Sprite(videoTexture);  video.texture.baseTexture.source.play();} 

This produces the error: "Cannot read property 'play' of null"

 

I'm obviously missing something... does anyone out there have any suggestions?

[xerver]

You forgot `new` and I'm not sure what the weird bracket notation is...I think you want:

let videoTexture = new PIXI.VideoBaseTexture.fromUrl("video/testVideo.mp4");

Make sure to release the resources in the loader, or you may have two instances of the video in memeory.

[d13]

Make sure to release the resources in the loader, or you may have two instances of the video in memeory.

 How do you do that?

[xerver]

loader.reset()

[d13]

Thank you, sir!

 

Still no luck with my test code, however

Here's the code that runs when the loader has finished loading the video file:

let videoTexture = new PIXI.VideoBaseTexture.fromUrl("video/testVideo.mp4");let video = new Sprite(videoTexture);stage.addChild(video);let videoSource = videoTexture.baseTexture.source;videoSource.play();

I'm getting this error: "Cannot read property 'hasLoaded' of undefined"

 

I have no trouble loading and playing the video using the old `fromVideo` method.

For example, this works fine:

 

 

 let videoTexture = Texture.fromVideo("video/how.mp4");

 let videoSprite = new Sprite(videoTexture);

 stage.addChild(videoSprite);

  

 

 let videoSource = videoTexture.baseTexture.source;

 videoSource.play();

... but I'm trying to avoid those legacy `from` methods.

[webuser]

I have a somewhat related question. Can I load both images and video in the Loader? I am able to load images as resources, but it does not appear to be loading videos since I am not able to access the videos as a resource.

[xerver]

6 hours ago, webuser said:

I have a somewhat related question. Can I load both images and video in the Loader? I am able to load images as resources, but it does not appear to be loading videos since I am not able to access the videos as a resource.

The loader certainly supports loading video files. I don't think there is a parser that creates the VideoBaseTexture for you, but resource-loader supports videos. You will have to pass a `loadType` override in the options, or set an extension to default to video (https://github.com/englercj/resource-loader/blob/master/src/Resource.js#L886) since I didn't put any default extension->video type mappings.

[dmko]

Seems like such a thing might be fragile/disallowed on iOS...https://discussions.apple.com/thread/5842398?tstart=0 ?

[xerver]

On 9/4/2016 at 0:35 PM, dmko said:

Seems like such a thing might be fragile/disallowed on iOS...https://discussions.apple.com/thread/5842398?tstart=0 ?

What such thing? No one has mentioned using data urls or XHR for video loading until you posted that so I'm not sure which part you are referring to.

[dmko]

Oh, maybe I misunderstood - how do you play a preloaded blob?

[xerver]

4 hours ago, dmko said:

Oh, maybe I misunderstood - how do you play a preloaded blob?

I wasn't suggesting to load it via XHR as a blob. resource-loader supports loading via a video element, just like it supports images loading via an image element.

That is why I mentioned you would need to set the load type, or set a default for the extension so it knows how to handle it:

Quote

You will have to pass a `loadType` override in the options, or set an extension to default to video (https://github.com/englercj/resource-loader/blob/master/src/Resource.js#L886) since I didn't put any default extension->video type mappings.

https://github.com/englercj/resource-loader/blob/master/src/Resource.js#L812

[dmko]

I'm still a bit confused by the contradiction between these statements:

Quote

 Load all the data up front as a blob, and play it as a video.

Quote

I wasn't suggesting to load it via XHR as a blob

Not nitpicking, just double-checking if there's some method I missed that would allow proper preloading the data before playback. Ultimately my goal would be to preload video data so that it can play immediately without fear of buffering. A video element doesn't work like that, and on iOS I think it won't even respect the preload attribute. Any ideas?

[xerver]

I said there were 2 methods, you quoted the first, but I recommended the second. You can preload the data as a blob and play it via base64, but I don't recommend it.

[lxnd]

Hi,

Spent some time trying to preload a mix of picture and video. I finally did it that way :

let datas = [
  {name: 'picto', url: '/static/picto.png'},
  {name: 'movie', url: '/static/movie.mp4'}
]
PIXI.loader.add(datas)
PIXI.loader.load(onPreloadComplete)

/* ... */

function onPreloadComplete (loader, resources) {
  let app = new PIXI.Application(/*...*/)

  /* ... */

  let videoData = resources['test-movie'].data
  let videoBaseTexture = PIXI.VideoBaseTexture.fromVideo(videoData)
  let videoSprite = PIXI.Sprite.from(videoBaseTexture)

  app.stage.addChild(videoSprite)

  /* ... */

}