如何在浏览器中让Ruffle Flash全屏运行并添加加载进度条？

一、实现Ruffle全屏运行 #

浏览器要求全屏操作必须由用户交互触发（如点击），以下是两种可行方案：

方式1：添加手动全屏按钮 #

在页面中添加全屏控制按钮，点击后触发播放器全屏：

1. 在HTML的<body>中添加按钮元素：

<button id="fullscreen-btn">全屏</button>

2. 在脚本中为按钮添加点击事件，调用浏览器全屏API：

document.getElementById('fullscreen-btn').addEventListener('click', () => {
    if (!document.fullscreenElement) {
        player.requestFullscreen().catch(err => {
            console.error(`全屏失败: ${err.message}`);
        });
    } else {
        document.exitFullscreen();
    }
});

同时确保你的Ruffle配置中letterbox设为"fullscreen"，这样全屏时影片会自适应屏幕比例显示。

方式2：页面点击触发自动全屏 #

如果希望用户点击页面任意位置触发全屏，可添加全局点击监听：

document.body.addEventListener('click', async () => {
    if (!document.fullscreenElement) {
        await player.requestFullscreen();
    }
}, { once: true });

二、添加加载进度条 #

利用Ruffle的loadProgress事件监听影片加载进度，实现进度条展示：

步骤1：添加进度条DOM与样式 #

在<head>中添加样式，<body>中添加进度条元素：

<head>
    <style>
        #loading-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #eee;
            z-index: 9999;
        }
        #progress-bar {
            height: 100%;
            width: 0%;
            background-color: #4CAF50;
            transition: width 0.3s ease;
        }
        #fullscreen-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            z-index: 9998;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="loading-progress">
        <div id="progress-bar"></div>
    </div>
</body>

步骤2：监听Ruffle加载事件 #

在创建播放器后，添加事件监听器更新进度条：

// 监听加载进度，更新进度条宽度
player.addEventListener("loadProgress", (event) => {
    const progress = event.detail.loaded / event.detail.total * 100;
    document.getElementById('progress-bar').style.width = `${progress}%`;
});

// 加载完成后隐藏进度条
player.addEventListener("load", () => {
    document.getElementById('loading-progress').style.display = 'none';
});

完整修改后的代码示例 #

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset='utf8'>
        <style>
            #loading-progress {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background-color: #eee;
                z-index: 9999;
            }
            #progress-bar {
                height: 100%;
                width: 0%;
                background-color: #4CAF50;
                transition: width 0.3s ease;
            }
            #fullscreen-btn {
                position: fixed;
                bottom: 20px;
                right: 20px;
                padding: 10px 20px;
                z-index: 9998;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="loading-progress">
            <div id="progress-bar"></div>
        </div>
        <div id='ruffle' style="text-align: center;"></div>
        <button id="fullscreen-btn">全屏</button>
        <script src='https://xxsibxx.github.io/ruffleembedsetup112/ruffle/ruffle.js'></script>
        <script>
var swfobject = {};

swfobject.embedSWF = function(url, cont, width, height){
    var ruffle = window.RufflePlayer.newest(),
        player = Object.assign(document.getElementById(cont).appendChild(ruffle.createPlayer()), {
            width: width,
            height: height,
            style: 'width: ' + width + 'px; height: ' + height + 'px',
        });
        window.RufflePlayer.config = {
    "publicPath": undefined,
    "polyfills": true,
    "autoplay": "on",
    "unmuteOverlay": "hidden",
    "backgroundColor": "#000000",
    "letterbox": "fullscreen",
    "warnOnUnsupportedContent": true,
    "contextMenu": false,
    "showSwfDownload": false,
    "upgradeToHttps": window.location.protocol === "https:",
    "maxExecutionDuration": {"secs": 15, "nanos": 0},
    "logLevel": "error",
    "base": null,
    "menu": true,
    "salign": "",
    "scale": "showAll",
    "quality": "medium",
};
    
    // 加载进度监听
    player.addEventListener("loadProgress", (event) => {
        const progress = event.detail.loaded / event.detail.total * 100;
        document.getElementById('progress-bar').style.width = `${progress}%`;
    });

    // 加载完成隐藏进度条
    player.addEventListener("load", () => {
        document.getElementById('loading-progress').style.display = 'none';
    });

    // 全屏按钮事件
    document.getElementById('fullscreen-btn').addEventListener('click', () => {
        if (!document.fullscreenElement) {
            player.requestFullscreen().catch(err => {
                console.error(`全屏失败: ${err.message}`);
            });
        } else {
            document.exitFullscreen();
        }
    });

    player.load({ url: url });
}

swfobject.embedSWF('URL', 'ruffle', 890, 529);
        </script>
    </body>
</html>

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