Phaser CE 2.10视频网页正常，Android（CocoonJS编译）运行报错求助

嘿，我来帮你捋捋这个Phaser CE视频在CocoonJS编译后Android 7.1.1跑不起来的问题～

先把你的问题和代码整理下，方便后续排查：

我是Phaser CE 2.10的新手，尝试将视频设置为游戏背景。该视频在本地Web服务器及Heroku站点均可正常运行，但使用CocoonJS编译后在Android 7.1.1系统上运行出现错误。代码片段如下：

var main = function(game){};
main.prototype = {
  preload: function(){
    game.load.video("earth_1", "assets/video/earth_1.mp4");
  },
  create: function(){
    var bg = spawner.spawn(g.sprites.bg)
    var video = game.add.video("earth_1");
    video.unlock();
    video.addToWorld();
    if(video){
      if(v...
    }
  }
};

结合Web环境正常、CocoonJS编译后异常的情况，大概率是编码兼容性、CocoonJS媒体策略或者老版本Phaser与Cocoon的适配问题，给你几个针对性的排查方案：

1. 先检查视频编码是否符合Android 7.1.1的要求 #

Web环境对MP4的兼容性很高，但CocoonJS的底层渲染引擎（尤其是Canvas+模式）对编码的要求更严格。Android 7.1.1对视频的标准要求是：

• 视频编码：必须是H.264 Baseline Profile（别用Main/High Profile，旧设备解码会出问题）
• 音频编码：AAC-LC格式
• 分辨率：尽量控制在1080p以内，中低端设备可能扛不住更高分辨率

你可以用HandBrake这类工具重新转码，直接选“Android”预设，或者手动调整上述参数，再试试编译运行。

2. 调整Phaser的视频加载与播放逻辑 #

你现在的代码没有等待视频加载完成就执行播放相关操作，CocoonJS里异步加载的延迟可能比Web环境高，建议改成回调触发：

create: function(){
  var video = game.add.video("earth_1");
  // 等待视频加载完成再处理
  video.onComplete.add(function(){
    video.unlock();
    video.addToWorld();
    video.play(true); // true开启循环，适合背景视频
  }, this);
  // 显式触发加载
  video.load();
}

另外，记得在CocoonJS的项目配置里，勾选android.permission.INTERNET和android.permission.READ_EXTERNAL_STORAGE权限，确保应用能读取本地视频资源。

3. 试试直接操作DOM视频元素（适合WebView+模式） #

Phaser CE 2.10比较老旧，和CocoonJS的Canvas+模式可能存在适配bug。如果换成WebView+模式，直接创建DOM视频元素放在游戏画布后面，稳定性会更高：

preload: function(){
  // 跳过Phaser的video加载，直接创建DOM视频
  var bgVideo = document.createElement('video');
  bgVideo.src = 'assets/video/earth_1.mp4';
  bgVideo.loop = true;
  bgVideo.muted = true; // 静音避免Android音频焦点限制
  bgVideo.style.position = 'absolute';
  bgVideo.style.top = '0';
  bgVideo.style.left = '0';
  bgVideo.style.width = window.innerWidth + 'px';
  bgVideo.style.height = window.innerHeight + 'px';
  bgVideo.style.zIndex = '-1'; // 放在游戏画布下层
  document.body.appendChild(bgVideo);

  // 加载完成后自动播放
  bgVideo.addEventListener('canplay', function(){
    bgVideo.play();
  });
}

注意：这个方法需要在CocoonJS编译时选择**WebView+**模式，Canvas+模式会隔离DOM，无法生效。

4. 排查Android 7.1.1的系统限制 #

Android 7.x有一些媒体播放的特殊限制：

• 关闭设备的“省电模式”，省电模式会限制后台媒体资源的加载与播放
• 检查应用是否获得了“悬浮窗权限”，如果视频元素需要在游戏上层显示，这个权限是必须的
• 坚持静音播放：Android 7.x对非用户交互触发的音频播放有严格限制，静音后可以绕过这个问题

内容的提问来源于stack exchange，提问作者Jon Guiriba