高级 JS API:配置对象、强制缩放、固定尺寸与 polyfill 控制
配置的两种作用范围
配置有两层:
- 全局配置
window.RufflePlayer.config— 影响本页面上所有 Ruffle 实例,包括自动 polyfill 替换出来的那些 - 实例配置
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 的日志——非常详细,但量也很大。