html使用ruffle在网页中播放flash

⌚Time: 2024-04-12 13:11:00

👨‍💻Author: Jack Ge

介绍

Ruffle 是一个用于在现代浏览器中播放 Adobe Flash 内容的开源项目。由于 Adobe 在2021年停止了对 Flash Player 的支持,许多网站和应用程序无法再正常播放 Flash 内容。Ruffle 的目标是通过在浏览器中模拟 Flash Player 的功能,使这些内容可以继续在现代环境中使用。

Ruffle 是使用 Rust 编程语言开发的,它提供了一个高性能、跨平台的 Flash Player 模拟器。Ruffle 可以被集成到现有的网站或应用程序中,用于解析和呈现 Flash 文件,适用于包括动画、游戏和交互式应用在内的各种 Flash 内容。

Ruffle可以作为浏览器插件、网页套件、桌面程序使用。缺乏对ActionScript 3的支持,因此对某些flash游戏不可以玩。

下载

官网是

https://ruffle.rs/

github地址

https://github.com/ruffle-rs/ruffle

可以看到有多个版本,将ruffle集成到网页,需要下载web-selfhosted版本的

下载后解压,就可以得到对应的js文件和说明,readme文件有例子很简单。演示了怎样加载一个swf文件

<script>
    window.RufflePlayer = window.RufflePlayer || {};

    window.addEventListener("DOMContentLoaded", () => {
        let ruffle = window.RufflePlayer.newest();
        let player = ruffle.createPlayer();
        let container = document.getElementById("container");
        container.appendChild(player);
        player.load("movie.swf");
    });
</script>
<script src="path/to/ruffle/ruffle.js"></script>

下面是一份的完整网页代码


<!DOCTYPE html>

<html>
    <head>
        <title>flash</title>
        <!--ruffle js的路径-->
        <script src="./ruffle.js"></script>
        <script>

                window.RufflePlayer = window.RufflePlayer || {};
                    window.addEventListener("DOMContentLoaded", () => {
                        let ruffle = window.RufflePlayer.newest();
                        let player = ruffle.createPlayer();
                        //播放器容器id
                        let container = document.getElementById("container");
                        container.appendChild(player);
                        //swf路径
                        player.load("./game.swf");
                });
        </script>
    </head>
    <body>
        <!--定义一个id为container的容器-->
        <div id="container">
        </div>
    </body>
</html>

之后你就可以在网页中运行flash了

web服务器的配置

在调试时如果发现警告,flash也会正常播放。但是好像性能会低一些

WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:
 TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'

解决办法就是在web服务端对wasm做正确的MIME类型配置,发送Content-Type: application/wasm头

对于nginx服务器,在他的配置文件里找到mime.types这个文件,在types里面添加

    application/wasm    wasm;

然后重启nginx服务器,清理浏览器缓存,重新打开页面就可以了