How to embed Ruffle flash player emulator into HTML file?

Question

How to embed Ruffle flash player emulator into HTML file?

12k Views Asked by Thundermole At 20 October 2024 at 00:01

I need help on implementing a swf into my HTML site with ruffle (https://ruffle.rs/), I added "AddType application/wasm .wasm" into httpd.conf in in apache, and this is my code but it does not display on my localhost server :

<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

I also tried this code, also no luck:

<!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>

I asked their discord but no answer so far. If anyone is more familiar with ruffle please assist.

Original Q&A

There are 2 best solutions below

Omar Castaño P On 04 April 2021 at 14:53

You haven't created the <div> for the player.

All this following code between <body> and </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>

Remember to add this line on your .htaccess and upload it:

AddType application/wasm .wasm wasm

and, also, remember to upload the whole carpet of ruffle selfhosted (6 files) to the root.

**e9x** · Accepted Answer

I have recently discovered how to get this working. Calling .play on the player returned by ruffle.createPlayer() takes an object or at least expects one. Doing player.load({ url: '/path/to/swf.swf' }) will work

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 });
}

Full code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset='utf8'>
    </head>
    <body>
        <div id='ruffle'></div>
        <script src='https://e9x.github.io/ruffle-example/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',
        });
    
    player.load({ url: url });
}

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

(Replace github.io links with your own)

How to embed Ruffle flash player emulator into HTML file?

There are 2 best solutions below

Related Questions in FLASH

Related Questions in EMULATION

Related Questions in RUFFLE

Trending Questions

Popular # Hahtags

Popular Questions