本文介绍如何使用 ruffle flash 播放器构建一个支持下拉菜单选择 swf 文件的交互式网页，无需刷新页面即可动态加载并播放不同 flash 动画。
本文介绍如何使用 ruffle flash 播放器构建一个支持下拉菜单选择 swf 文件的交互式网页，无需刷新页面即可动态加载并播放不同 flash 动画。
要实现“下拉菜单选择 SWF 文件并即时播放”的功能，核心在于将 Ruffle 播放器实例化一次，并在其生命周期内复用 player.load() 方法动态加载不同资源——而非每次切换都重新创建播放器。这不仅提升性能，也避免 DOM 冗余和事件重复绑定问题。
以下是一个完整、可直接运行的 HTML 示例：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ruffle SWF 文件选择播放器</title><!-- 确保 ruffle.js 路径正确，例如放在 ./ruffle/ruffle.js --><script src="ruffle/ruffle.js"></script><h2>选择并播放 SWF 动画</h2>
<div id="container" style="margin: 16px 0;"></div>
<label for="fileSelector">选择动画文件：</label>
<select id="fileSelector"><option value="">— 请选择 —</option>
<option value="swf/game.swf">经典小游戏</option>
<option value="swf/intro.swf">开场动画</option>
<option value="swf/demo.swf">演示动画</option></select><script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", () => {
// 获取最新版 Ruffle 播放器构造器
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("container");
const fileSelector = document.getElementById("fileSelector");
// 设置播放器尺寸与样式
player.style.width = "450px";
player.style.height = "450px";
player.style.border = "1px solid #ccc";
player.style.boxShadow = "0 2px 6px rgba(0,0,0,0.1)";
// 初始加载：可选预设默认文件（如第一个有效选项）
if (fileSelector.options[1]?.value) {
player.load({
url: fileSelector.options[1].value,
backgroundColor: "#000"
});
}
// 绑定下拉菜单变更事件
fileSelector.addEventListener("change", () => {
const selectedFile = fileSelector.value;
if (selectedFile) {
player.load({
url: selectedFile,
backgroundColor: "#000"
});
} else {
// 清空播放器（可选：显示提示或占位图）
container.innerHTML = "<p style='color:#666; font-style:italic;'>请从下拉菜单中选择一个 SWF 文件";
}
});
// 将播放器挂载到容器
container.appendChild(player);
});
</script>
✅ 关键要点说明：
-
路径需准确：
<option value="swf/xxx.swf"></option>中的路径必须与实际文件位置一致（推荐统一存于swf/子目录下）； -
跨域限制注意：若 SWF 文件托管在其他域名，请确保服务端已配置 CORS 头（如
Access-Control-Allow-Origin: *），否则 Ruffle 将因浏览器安全策略拒绝加载； -
错误处理增强建议：生产环境中可监听
player.addEventListener("error", handler)捕获加载失败（如文件不存在、格式错误等）； -
用户体验优化：可添加加载状态提示（如 spinner）、播放器尺寸自适应（配合 CSS
max-width: 100%）或键盘导航支持（<select></select>默认支持 Tab + 方向键）。
该方案轻量、兼容性强，适用于旧 Flash 内容归档、教育演示或怀旧游戏门户等场景。只需维护一个 HTML 文件与 ruffle.js，即可快速部署多文件 Flash 播放界面。
