Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

[PIXI] Loading Video files?


d13
 Share

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!

 

Link to comment
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).

Link to comment
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

Link to comment
Share on other sites

  • 5 weeks later...

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?

Link to comment
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.

Link to comment
Share on other sites

  • 11 months later...
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.

Link to comment
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

Link to comment
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?

Link to comment
Share on other sites

  • 1 year later...

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)

  /* ... */

}

 

 

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.

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

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...