Jump to content

Problem to play video


Recommended Posts

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.

Link to comment
Share on other sites

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

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.


  • Recently Browsing   0 members

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