VideoTexture Help Requested

[sthrnfriedchkn]

  So, first allow me to expain where I am coming from.  I have mainly worked in C++ for the better part of ten years as a hobbyist developer (mainly dealing in arcade systems.)  Now, I have got the overall basic grasp of Phaser down (in fact I love it, and it really suits our needs for this project) and have made some great headway in the project we are currently working on.  This project was moved from LibGdx (JAVA) over to HTML5/Phaser to compensate for one of JAVAS weakest suits (inline video, or the lack thereof.)  Since video is supported natively via HTML5 I was almost certain that playing video in phaser would be supported as well.

 

I do see that Phaser uses Pixi, therefore I will assume that Phaser also has access and uses PIXI VideoTexture as well.  However, with that being said I have run into another brick wall trying to get video texture to work.  Here is the current setup (see psudeo image attached), we have all of our elements on screen and working fine, we have a list which displays filenames at the top of the page, an information panel to the left, and a video panel to the right.  This video panel must be rendered at the bottom (z) so that menus can be expanded/opened up over it as well so that other graphical elements can be displayed on top of it.  Please keep in mind we are using Phaser as a canvas in this game.  Now, when I try to add a videotexture to the JS of our current scene (lets say game.js for the sake of argument (which is a game state by the way)) all we get are errors "VideoTexture is undefined."

 

So lastly, how the heck does one get videos to play in a HTML5 game built upon the Phaser framework?  I have included the JS file that is in question as well as a mockup image of how our scene should look.  Any assistance whatsoever would be greatly appreciated.

var RadKade = RadKade || {};RadKade.Preload = function(){};var filter;var sprite;RadKade.Preload.prototype = {	preload: function() {		this.game.stage.backgroundColor = '#000000';		var fragmentSrc = [        "precision mediump float;",        "uniform float     time;",        "uniform vec2      resolution;",        "// Oldskool plasm shader. (c) Victor Korsun, [email protected]; 1996-2013.",        "//",        "// Attribution-ShareAlike CC License.",        "//----------------",        "const int ps = 8; // use values > 1..10 for oldskool",        "//----------------",        "void main( void ) {",            "float x = gl_FragCoord.x / resolution.x * 640.;",            "float y = gl_FragCoord.y / resolution.y * 480.;",            "if (ps > 0)",            "{",                "x = float(int(x / float(ps)) * ps);",                "y = float(int(y / float(ps)) * ps);",            "}",            "float mov0 = x+y+sin(time)*10.+sin(x/90.)*70.+time*2.;",            "float mov1 = (mov0 / 5. + sin(mov0 / 30.))/ 10. + time * 3.;",            "float mov2 = mov1 + sin(mov1)*5. + time*1.0;",            "float cl1 = sin(sin(mov1/4. + time)+mov1);",            "float c1 = cl1 +mov2/2.-mov1-mov2+time;",            "float c2 = sin(c1+sin(mov0/100.+time)+sin(y/57.+time/50.)+sin((x+y)/200.)*2.);",            "float c3 = abs(sin(c2+cos((mov1+mov2+c2) / 10.)+cos((mov2) / 10.)+sin(x/80.)));",            "float dc = float(16-ps);",            "if (ps > 0)",            "{",                "cl1 = float(int(cl1*dc))/dc;",                "c2 = float(int(c2*dc))/dc;",                "c3 = float(int(c3*dc))/dc;",            "}",            "gl_FragColor = vec4( cl1,c2,c3,1.0);",        "}"    ];		sprite = this.game.add.sprite();    sprite.width = this.game.width;    sprite.height = this.game.height;	var texture = this.game.add.VideoTexture.fromUrl("file:///C:\Users\Ronald\Desktop\vids\mame.mp4");	    filter = new Phaser.Filter(this.game, null, fragmentSrc);    filter.setResolution(this.game.width, this.game.height);	sprite.filters = [ filter ];				this.game.load.audio('bgm', ['assets/audio/bgs01.ogg']);		this.music = this.game.add.audio('bgm');		this.music.play();				this.splash = this.add.sprite(this.game.world.centerX, this.game.world.centerY + 1000, 'radtop');		this.splash.anchor.setTo(0.5);				var moveInSoft = this.game.add.tween(this.splash).to({x:this.game.world.centerX,y:this.game.world.centerY}, 3000);		moveInSoft.onComplete.add(this.secondPhase, this);		moveInSoft.start();	},		secondPhase: function() 	{		this.bottom = this.add.sprite(this.game.world.centerX - 250, this.game.world.centerY, 'radbottom');		this.bottom.alpha = 0;		var moveInBottom = this.game.add.tween(this.bottom).to({alpha:1}, 2000, Phaser.Easing.Linear.None);		moveInBottom.onComplete.add(this.thirdPhase, this);		moveInBottom.start();	},		thirdPhase: function()	{			},		update: function() {		filter.update();	}};

Please note the line that states: var texture = this.game.add.VideoTexture.fromUrl("file:///C:\Users\Ronald\Desktop\vids\mame.mp4");  (We have tried numerous iterations of this and fail at every turn, also tried calling it directly.)

 

Thanks for any and all assistance; hopefully we have described our situation well enough, but if further clarification is needed I will do so.

[devx123x]

You've probably already discovered this, but these posts may interest you.

https://github.com/photonstorm/phaser/commit/a2eaccabedbb2d99b2f744a5717fb9ba31f47762

http://www.html5gamedevs.com/topic/13961-videotexture-load-video/

[omarojo]

so what you are saying is, there is no possible natural way to play a video in Phaser ? Im newbie so I have no intention to hack into Phaser to make it work. If Phaser is not able to play videos, then I think I will need to move to other framework, because there are some sections in my game that will require to show a Video.

[drhayes]

So, yeah, I don't think Phaser out of the box plays videos and you didn't say anything about this as a problem so I could be totally out of line but... are you using Chrome as your web browser?

var texture = this.game.add.VideoTexture.fromUrl("file:///C:\Users\Ronald\Desktop\vids\mame.mp4");

Chrome's security settings treat anything out of the current directory where the HTML file came from as cross-domain and, thus, disallowed. For example, if your address bar reads "file:///c:\Users\Ronald\Desktop\game\index.html" then it's a security error to read from "\vids". If you use a web server you won't have this problem but you will have to change your URLs.

 

Might I suggest nodejs' http-server? It's a great static server for local development.