如何为Ruffle Flash播放器添加下拉菜单以选择要播放的文件？

以下是完整的实现代码，直接替换你现有内容即可，包含下拉菜单选择、SWF文件切换播放的功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SWF文件播放器</title>
    <style>
        #swf-select {
            padding: 8px;
            font-size: 16px;
            margin-bottom: 10px;
        }
        #container {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <!-- SWF文件选择下拉菜单 -->
    <select id="swf-select">
        <option value="swf/file1.swf">文件1.swf</option>
        <option value="swf/file2.swf">文件2.swf</option>
        <option value="swf/file3.swf">文件3.swf</option>
        <!-- 替换成你实际的SWF文件路径和名称 -->
    </select>

    <!-- Ruffle播放器容器 -->
    <div id="container"></div>

    <script src="ruffle/ruffle.js"></script>
    <script>
        let rufflePlayer; // 全局保存播放器实例，方便切换文件

        window.addEventListener("load", () => {
            // 初始化Ruffle
            const ruffle = window.RufflePlayer.newest();
            rufflePlayer = ruffle.createPlayer();
            const container = document.getElementById("container");
            container.appendChild(rufflePlayer);
            
            // 设置播放器尺寸
            rufflePlayer.style.width = "450px";
            rufflePlayer.style.height = "450px";

            // 加载默认选中的SWF
            const selectElement = document.getElementById("swf-select");
            loadSwf(selectElement.value);

            // 监听下拉菜单切换事件
            selectElement.addEventListener("change", (e) => {
                loadSwf(e.target.value);
            });
        });

        // 加载指定SWF文件的函数
        function loadSwf(filePath) {
            rufflePlayer.load({
                url: filePath,
                backgroundColor: "#000"
            });
        }
    </script>
</body>
</html>

关键细节说明 #

• 下拉菜单配置：在<select>的<option>里替换成你swf文件夹中实际的文件，value属性必须填写完整路径（格式为swf/xxx.swf），文本部分可自定义显示名称。
• 播放器复用：把Ruffle实例保存在全局变量中，切换文件时直接调用load方法重新加载，避免重复创建播放器。
• 路径检查：确保ruffle/ruffle.js的路径正确（Ruffle文件需放在网站根目录的ruffle文件夹下），同时swf文件夹要和当前网页文件在同一目录层级。

额外提示 #

如果不想手动添加所有SWF文件的选项，可以通过后端语言（如PHP、Node.js）遍历swf文件夹，动态生成下拉菜单的<option>标签——纯前端无法直接读取服务器目录内容。

内容的提问来源于stack exchange，提问作者Benni Mayhew