Video Texture and controlling playback.

[biscuitcleaver]

Hi all,

 

I know the Video Texture is brand new - but is there an easy way to make videos play and pause? It looks like it's creating a video element in html, but when I try to pause that video element using the onPlayStart()/onPlayStop()  functions, my video will pause - but the audio is still playing. I think I'm stopping the video texture rendering, but not the actual video itself - does that seem correct? Is there a way to do this?

 

Thanks!

[xerver]

there is a property "source" that is the video element itself. Use that to play/pause.

[Dok11]

there is a property "source" that is the video element itself. Use that to play/pause.

Can you write some simple example, please?

 

I've tryed this code:

function getTextPlane() {	var texture = PIXI.Texture.fromVideo('../img/sintel.mp4');	texture.source.pause();		var plane = new PIXI.Sprite(texture);	plane.alpha = 0.5;	plane.width = 370;	plane.height = 165;		return plane;}

It s get error: Uncaught TypeError: Cannot read property 'pause' of undefined

 

And this too:

function getTextPlane() {	var texture = PIXI.Texture.fromVideo('../img/sintel.mp4');		var plane = new PIXI.Sprite(texture);	plane.alpha = 0.5;	plane.width = 370;	plane.height = 165;			plane.texture.source.pause();		return plane;}

I can't understand where i need to search 'soruce' property.

[xerver]

Source is a property of the base texture, not the texture:

texture.baseTexture.source.pause();

[Dok11]

 

Source is a property of the base texture, not the texture:

texture.baseTexture.source.pause();

Ye, thx, this works.

 

Let me ask another question. How I can stop my video in the begginig scene render?

I wont say, what this code (i mean pause()) work in some actions (example by click on some oject), but if i write this before «animate();», or after this not work - video continiue playing.

 

See:

// start animatingtextPlane.texture.baseTexture.source.pause();	// not workinganimate();textPlane.texture.baseTexture.source.pause();	// not working too

But this code is working:

setTimeout(function() {	textPlane.texture.baseTexture.source.pause();}, 2000);

..but i'm understand, what this wrong to do, i mean that it is not best way to do it.

 

P.S. I'm trying set autostar="false" for «textPlane.texture.baseTexture.source» and it's notworking for me.

P.P.S. How i can set video to autloop playing? It's way as «textPlane.texture.baseTexture.source.loop = true» or another?

[xerver]

If you don't want it in the scene then remove the sprite that is in the scene. You should probably also pause the texture so it doesn't keep playing.

[Dok11]

If you don't want it in the scene then remove the sprite that is in the scene. You should probably also pause the texture so it doesn't keep playing.

No, I need this in the scene, but with first frame and by mouse on  - play video and mouse out  - set video pause.

I success used events mouseon and mouseleave - this work, but I can't stop my video with start scene.

[xerver]

No, I need this in the scene, but with first frame and by mouse on  - play video and mouse out  - set video pause.

I success used events mouseon and mouseleave - this work, but I can't stop my video with start scene.

 

So you are trying to stop the video, before it has fully loaded? What you will see happen is that when it has fully loaded, pixi will auto play it for you. You can listen for the 'load' event on the VideoBaseTexture and pause in that callback.

[Dok11]

So you are trying to stop the video, before it has fully loaded? What you will see happen is that when it has fully loaded, pixi will auto play it for you. You can listen for the 'load' event on the VideoBaseTexture and pause in that callback.

Yes, I tried this too, but not sure what it's was right.

Please, see this code:

function getTextPlane() {	var texture = PIXI.Texture.fromVideo('../img/sintel.mp4');	var plane = new PIXI.Sprite(texture);	plane.alpha = 0.5;	plane.width = 370;	plane.height = 165;	texture.baseTexture.addEventListener('onload', function() {		console.log('onload complete');	});	return plane;}

Chrome dev tools show error: 'Uncaught TypeError: texture.baseTexture.addEventListener is not a function'.

 

Or I need use VideoBaseTexture instead 'PIXI.Texture.fromVideo('../img/sintel.mp4');'?

[xerver]

texture.baseTexture.on('load', function() {

console.log('load complete');

});

[Dok11]

texture.baseTexture.on('load', function() {	console.log('load complete');});

Many thanks, you saved me.

But i used event 'loaded', not 'load'.

[xerver]

My bad, it is loaded; sorry about that.

[Dok11]

In any case, I am grateful for the help!

 

 

 

Be sure to checkout my book "Building Web Games with Pixi.js" coming soon!

Can you say something about the date?

[xerver]

In any case, I am grateful for the help!

 

Can you say something about the date?

I'm hoping to release it early next year