浏览器无插件播放Flash动画

创建:2020年10月9日 修改:2021年1月7日  作者:清风明月

在过去的很长时间里,Flash 都是当之无愧的前端核心技术。但随着 HTML5、WebGL 和 WebAssembly 等技术的出现和成熟,以及 Flash 自身的众多问题。今天,主流的浏览器已经开始默认关闭Flash插件,并为今后逐渐抛弃 Flash 做准备。

因此,Adobe 联合了 Apple, Facebook, Google, Microsoft 和 Mozilla 正式宣布:将在2020年12月31日停止支持 Flash。

这样一来,精彩的 Flash 动画资源是不是在网页上就不能播放了?噔噔噔!Flash 模拟器 Ruffle 粉墨登场。

Ruffle 是一个用 Rust 语言开发的 Adobe Flash Player 模拟器,可用于桌面和网页,已经通过 WebAssembly 实现在 Web 上的支持,该项目目前还处于 POC 概念验证阶段。

Ruffle 使用例子(wasted sky 小游戏):


Ruffle 使用很简单,以下是 Polyfill 的方式,只需在 Flash 插入代码前引用js就行:

<script src="ruffle/ruffle.js"></script>
<embed src="wasted_sky.swf" width="550" height="400" />

以下是更高级的js用法 Ruffle JavaScript API:

<script src="ruffle/ruffle.js"></script>
<div id="container"></div>
<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.style.width=550+"px";
        player.style.height=400+"px";
        player.load("wasted_sky.swf");
    });
</script>

例子打包下载

例子打包 demo.rar 里面 ruffle/ 文件夹(里面共3个文件)可以放置任何地方,使用时只需引用 ruffle.js 它会智能检测加载其他两个文件

ruffle 项目每天都会发布更新,下载 selfhosted.zip 结尾文件,解压进上面 ruffle.js 所在文件夹
下载地址:https://github.com/ruffle-rs/ruffle/releases
只需压缩包里.js和.wasm格式共3个文件

服务器需配置 .wasm 文件的 MIME 类型:application/wasm

Ruffle 项目源代码:https://github.com/ruffle-rs/ruffle