Как это сделано у нас

Где лежат копии

Общая копия - в папке библиотек libs.gyes.ru, в /ruffle/ (версия 0.5.0, вместе с файлами лицензий). Кроме того, у сайтов с Flash своя копия рядом со страницами: например, у mult.old-web.com это папка /ruffle/ (там ночная сборка от 13.11.2024). Так файлы .wasm всегда грузятся с того же сайта, и CORS не нужен.

mult.old-web.com: мультфильм без заставки Ruffle

Обычно в новом браузере Ruffle сначала показывает свою заставку: логотип и полоску загрузки. Потом, если ролик не запущен сам, - большую кнопку «Play», а если браузер запретил звук - ещё и плашку «нажмите, чтобы включить звук». Для сайта 2003 года всё это выглядит чужим.

На каждой странице мультфильма на mult.old-web.com в <head> стоит вот что (дословно из кода сайта):

<script src="../ruffle/ruffle.js"></script>
<script type="text/javascript">
window.RufflePlayer.config = {
	autoplay: "on",
  unmuteOverlay: "hidden"
};
</script>
<style type="text/css">
ruffle-player, ruffle-embed, ruffle-object {
	--splash-screen-background: #ffffff;
	--logo-display: none;
}
</style>

Здесь три приёма:

autoplay: "on" - ролик запускается сам, кнопки «Play» нет.
unmuteOverlay: "hidden" - плашка про звук не показывается.
Стили заставки. Ruffle рисует свои элементы (ruffle-player, ruffle-embed, ruffle-object) и берёт цвета заставки из CSS-переменных. --logo-display: none прячет логотип, а --splash-screen-background: #ffffff делает фон заставки того же белого цвета, что и место под роликом на странице. Пока ролик грузится, на его месте просто белый прямоугольник - как будто Flash ещё качается в 2003 году. Потом мультфильм появляется сам.

Сам ролик вставлен обычным <object> + <embed>, как в разделе «Как подключить». Поэтому в IE6 и Opera 9 те же страницы играет настоящий Flash Player, а все эти настройки там просто не используются.

Это демо

Страница демо устроена так же, только настройки заданы до загрузки ruffle.js (так советуют авторы Ruffle), а цвет заставки - белый, под цвет врезки:

<script type="text/javascript">
window.RufflePlayer = window.RufflePlayer || {};
window.RufflePlayer.config = { autoplay: "on", unmuteOverlay: "hidden" };
</script>
<script src="ruffle.js"></script>
<style type="text/css">
ruffle-player, ruffle-embed, ruffle-object {
	--splash-screen-background: #ffffff;
	--logo-display: none;
}
</style>