ruffle 中文文档 下载 App

高级 JS API:配置对象、强制缩放、固定尺寸与 polyfill 控制

配置的两种作用范围

配置有两层:

  1. 全局配置 window.RufflePlayer.config — 影响本页面上所有 Ruffle 实例,包括自动 polyfill 替换出来的那些
  2. 实例配置 createPlayer(config) — 只影响当前这个实例,跟全局配置合并(实例里写的字段覆盖全局)

建议只在 <script src="ruffle.js"> 之前设置全局配置,之后设会被 Ruffle 内部的初始化覆盖掉。

完整配置对象速查

window.RufflePlayer = window.RufflePlayer || {};
window.RufflePlayer.config = {
  // ==== 加载相关 ====
  autoStart: "auto",        // "auto" | "on" | "off" — 加载后是否自动播放
  splashScreen: true,       // 加载时是否显示 Ruffle logo 过渡动画
  showSwfDownload: false,   // 是否在右键菜单里显示"下载 SWF"
  basePath: "./",           // SWF 内部资源的基准路径

  // ==== 缩放 ====
  scale: "showAll",         // "showAll" | "exactFit" | "noBorder" | "noScale"
  forceScale: false,        // 是否强制覆盖 SWF 内部设置的缩放模式

  // ==== 尺寸 ====
  fixedWindowSize: false,   // 是否强制固定窗口尺寸
  width: 800,               // 配合 fixedWindowSize 使用
  height: 600,
  letterbox: "#000000",     // 留黑边时的颜色(十六进制或颜色名)

  // ==== 运行时 ====
  quality: "high",          // "low" | "high" | "best" — 渲染质量
  backgroundColor: null,    // 覆盖 SWF 自带的背景色,填十六进制
  upgradeToHttps: true,     // 把页面内 HTTP 请求自动升级成 HTTPS(强烈建议保持开启)
  allowScriptAccess: false, // 是否允许 ExternalInterface 调用外部 JS(安全保守)

  // ==== Polyfill ====
  polyfills: {
    enableScriptFix: true,
    enableFlashPlayerFix: true,
    enableFlashPlayerInstalled: false
  },

  // ==== 日志 ====
  logLevel: "warn",         // "error" | "warn" | "info" | "debug"

  // ==== 其他 ====
  openInNewTab: false       // 右键菜单里"在新标签打开"是否可用
};

站长高频场景示例

场景 1:SWF 内部把自己设成很小的显示区域,想强制铺满容器

window.RufflePlayer.config = {
  scale: "showAll",
  forceScale: true,
  letterbox: "#1a1a2e"
};

效果:按保持比例放大填满,两侧黑边用深蓝色。想完全铺满不管变形就把 scale 改成 "exactFit"、forceScale: true。

场景 2:网站全站 HTTPS,但有些老 SWF 内部还在请求 HTTP 资源

window.RufflePlayer.config = {
  upgradeToHttps: true
};

默认就是开的,但如果你之前手动关过、现在要重新开。

场景 3:页面上有多个 Flash 区域、各自尺寸不同

不要用全局 width/height,每个 createPlayer() 时单独传:

const player1 = ruffle.createPlayer({ width: 400, height: 300 });
const player2 = ruffle.createPlayer({ width: 800, height: 600 });

场景 4:想禁用自动 polyfill、只手动创建播放器

window.RufflePlayer.config = {
  polyfills: {
    enableScriptFix: false,
    enableFlashPlayerFix: false,
    enableFlashPlayerInstalled: false
  }
};

这样页面上原有的 Flash 标签不会被自动替换,你需要手动 createPlayer()。

场景 5:SWF 里的按钮要回调你页面的 JS

window.RufflePlayer.config = {
  allowScriptAccess: "always"   // 或 "sameDomain" — "always" 最松
};

allowScriptAccess 控制 Flash ExternalInterface 能不能调用外部 JS 函数。默认 false 是为了安全,如果你知道这个 SWF 里有 ExternalInterface.call("myJSFunction") 这种调用,就需要开。

调试配置

线上推荐 logLevel: "warn",只打印 warning 和 error。本地调试可以设成 "debug",Console 里会打印 Ruffle 内部每一步解析 ActionScript 的日志——非常详细,但量也很大。