動画を背景にシューティングゲーム(JavaScript, p5.js)

 

PCのBrouser(Edge, IE)で動きます。Chromeでは背景動画が出ません。

 

↓こちらは静止画を背景にbluemixのサイトで動かしています。

なぜか動画が出ないので静止画にしました?

 

https://midosujishootgame.mybluemix.net/

 

このサイトを開くとスマホでもなんとか動きます。遅い場合は再読み込みしてください。

 

 

以下はPCのIE, Edgeで動画が動くプログラムです。動画は自前のものを使ってください。
-----------------
htmlファイル
-----------------
<html><head>  <meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="Video2.js"></script>
</head><body></body></html>
-----------------
Video2.jsファイル
-----------------
var k=999; var S=1; var SW1=1; var SW2=1;
var x, Px, PxE, P1x, P1xE, P2x, P2xE, L, L1, L2, Shoot;
function setup() {
  createCanvas(2000, 800);
  Shoot = createVideo("./midosuji.mp4"); // 自前の動画を使ってください。
  Shoot.loop(); Shoot.hide();
}
function draw() {
  background(150); image(Shoot,400,40,1200,800);
 if (k>PI/2-0.1){SW1=1; SW2=1; k=0.5; Px=700; PxE=random(500)+200; // 赤玉の終了位置
  L=(PxE-Px); P1x=random(1000)+250; P1xE=random(1000)+250; // 三角の出現と消える位置
  L1=(P1xE-P1x); P2x=random(2000)+150; P2xE=random(1000)+150; L2=(P2xE-P2x);
   };
  x=Px+L*sin(k)^2+S; y=(800+20)*cos(k)^2; // 赤玉の位置
  noStroke(); fill(255,50,50);
  ellipse(x-0.5*(x-mouseX), y, y/8, y/8);
  k=k+0.01; fill(0);
  stroke('yellow'); strokeWeight(10);
  x1=P1x+L1*sin(k)^2; y1=(800-20)*cos(k)^2;
  if(SW1==1){triangle(x1+y1/6,y1+y1/6,x1,y1-y1/4,x1+y1/6,y1-y1/8);};
  x2=P2x+L2*sin(k)^2; y2=(800+30)*cos(k)^2;
  if(SW2==1){triangle(x2,y2-y2/6,x2-y2/6,y2+y2/6,x2+y2/6,y2-y2/4);};
  if (abs(x-0.5*(x-mouseX)-x1-50)<20){
   SW1=0;
   for (var r = 0; r < 3; r++) {
       fill(255,255,0); noStroke();
        ellipse(x1-random(200)+150, y1-random(200)+50, 40, 20);
   }
  }
  if (abs(x-0.5*(x-mouseX)-x2-50)<20){
   SW2=0;
   for (var r = 0; r < 3; r++) {
       fill(255,255,0); noStroke();
        ellipse(x2-random(200)+150, y2-random(200)+50, 40, 20);
   }
  }
}