Problem to play video

[bagusflyer]

My code:

 

module States {  export class PlayState extends Phaser.State {    preload() {      this.game.load.video('video', 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4');    }    create() {      var video = this.game.add.video('video');      var sprite = video.addToWorld(this.game.width / 2, this.game.height / 2, 0.5, 0.5);      video.play(true);    }  }}

The sound of the video is playing. But it shows a black screen with the following error message in console:

 

 

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.

 

 

 

Any idea? Thanks.

[Clowerweb]

It's cross-origin, so the video host has to allow CORS (Cross-Origin Resource Sharing). One solution would be to use a video that's hosted on your own server (this option may not be viable for most people due to the size and bandwidth requirements of videos), or to use a video host that allows CORS. Try YouTube and see if that works:

Also, try adding:

video.crossOrigin = "Anonymous";

Finally, if all else fails, you can try using a proxy, such as crossorigin.me.

this.game.load.video('video', 'http://crossorigin.me/http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4');