如何将 Ruffle Flash Player 模拟器嵌入到 HTML 文件中？

编程问答 2022-06-01

问题描述

我需要帮助使用 ruffle (https://ruffle.rs/) 在我的 HTML 站点中实现 swf，我在 apache 的 httpd.conf 中添加了“AddType application/wasm .wasm”，这是我的代码，但确实如此不在我的本地主机服务器上显示：

<html><head><script src="ruffle/ruffle.js"></script>
</head>
<body>
<script>
    window.RufflePlayer = window.RufflePlayer || {};
    window.addEventListener("load",(event) => {
        const ruffle = window.RufflePlayer.newest();
        const player = ruffle.createPlayer();
        const container = document.getElementById("container");
        container.appendChild(player);
        player.load("mig29.swf");
    });
</script>
<script src="ruffle/ruffle.js"></script>

</body>
</html

我也试过这个代码，也没有运气：

<!doctype html>
<html>
<head>
    <Meta charset="utf-8" />
    <title>WORKAROUND</title>

    <script>
        window.RufflePlayer = window.RufflePlayer || {};
        window.RufflePlayer.config = {
            "public_path": "ruffle/","polyfills": ["static-content","plugin-detect","dynamic-content"]
        };
    </script>
    <script src="ruffle/ruffle.js"></script>

    <!-- Start workaround -->
    <script>
        const swfobject = {};
    </script>
    <script>
        Object.defineProperty(swfobject,"embedSWF",{
            value: function() {
                var ruffle = window.RufflePlayer.newest();
                var player = ruffle.create_player();
                var container = document.getElementById(arguments[1]);
                container.innerHTML = "";
                container.style.width = arguments[2] + "px";
                container.style.height = arguments[3] + "px";
                player.style.width = container.style.width;
                player.style.height = container.style.height;
                container.appendChild(player);
                player.stream_swf_url(arguments[0]);
            },writable: false,configurable: false
        });
    </script>
    <!-- End workaround - This code also works if placed before <swfobject.js> -->

    <script src="swfobject.js"></script>

</head>
<body>

<div id="file_div">Flash Player not detected!</div>
<script>
    swfobject.embedSWF("mig29.swf","file_div","550","400","8");
</script>

</body>
</html>

我问过他们的不和，但到目前为止没有答案。如果有人更熟悉褶边，请提供帮助。

解决方法

我最近发现了如何让它发挥作用。在 ruffle.createPlayer() 返回的播放器上调用 .play 需要一个对象或至少需要一个对象。做player.load({ url: '/path/to/swf.swf' })会起作用

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',});
    
    player.load({ url: url });
}

完整代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset='utf8'>
    </head>
    <body>
        <div id='ruffle'></div>
        <script src='https://e9x.github.io/ruffle/ruffle.js'></script>
        <script>
var swfobject = {};

swfobject.embedSWF = function(url,});
    
    player.load({ url: url });
}

swfobject.embedSWF('https://e9x.github.io/ruffle/1on1soccer_24.swf','ruffle',500,500);
        </script>
    </body>
</html>
,

您尚未为播放器创建 <div>。

<body> 和 </body> 之间的所有以下代码：

<div id="container"> </div>

<script src="ruffle/ruffle.js"></script>
    <script>
        window.RufflePlayer = window.RufflePlayer || {};
        window.addEventListener("load",(event) => {
            const ruffle = window.RufflePlayer.newest();
            const player = ruffle.createPlayer();
            const container = document.getElementById("container"); 
            container.appendChild(player);
            player.load({
                url: "mig29.swf",backgroundColor: "#000",});
            player.style.width = "450px"; 
            player.style.height = "450px";
        });
    </script>

记得在您的 .htaccess 上添加此行并上传：

AddType application/wasm .wasm wasm

此外，请记住将整个自托管的 ruffle 地毯（6 个文件）上传到根目录。

emulationflashflashruffle