浏览器无插件播放Flash动画

创建:2020年10月9日 作者:SamStudio

在过去的很长时间里,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.create_player();
        let container = document.getElementById("container");
        container.appendChild(player);
		player.style.width=550+"px";
		player.style.height=400+"px";
        player.stream_swf_url("wasted_sky.swf");
    });
</script>

例子打包下载

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

ruffle 项目每天都会发布更新,可以下载解压进上面 ruffle.js 所在文件夹,下载地址:
https://ruffle-rs.s3-us-west-1.amazonaws.com/builds/web/ruffle_web_latest.zip
只需压缩包里.js和.wasm格式共3个文件

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

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