d13

[PIXI] Loading Video files?

Recommended Posts

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!

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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)

  /* ... */

}

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.