浏览器无插件播放Flash动画
在过去的很长时间里,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