如何将 Ruffle Flash 播放器模拟器嵌入 HTML 文件?
How to embed Ruffle flash player emulator into HTML file?
我需要帮助将 swf 实施到我的 HTML 带有荷叶边的网站 (https://ruffle.rs/),我将“AddType application/wasm .wasm”添加到 httpd.conf 中apache,这是我的代码,但它没有显示在我的本地主机服务器上:
<html><head><script src="ruffle/ruffle.js"></script>
</head>
<body>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("container");
container.appendChild(player);
player.load("mig29.swf");
});
</script>
<script src="ruffle/ruffle.js"></script>
</body>
</html
我也试过这个代码,也没有运气:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>WORKAROUND</title>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.RufflePlayer.config = {
"public_path": "ruffle/",
"polyfills": ["static-content", "plugin-detect", "dynamic-content"]
};
</script>
<script src="ruffle/ruffle.js"></script>
<!-- Start workaround -->
<script>
const swfobject = {};
</script>
<script>
Object.defineProperty(swfobject, "embedSWF", {
value: function() {
var ruffle = window.RufflePlayer.newest();
var player = ruffle.create_player();
var container = document.getElementById(arguments[1]);
container.innerHTML = "";
container.style.width = arguments[2] + "px";
container.style.height = arguments[3] + "px";
player.style.width = container.style.width;
player.style.height = container.style.height;
container.appendChild(player);
player.stream_swf_url(arguments[0]);
},
writable: false,
configurable: false
});
</script>
<!-- End workaround - This code also works if placed before <swfobject.js> -->
<script src="swfobject.js"></script>
</head>
<body>
<div id="file_div">Flash Player not detected!</div>
<script>
swfobject.embedSWF("mig29.swf", "file_div", "550", "400", "8");
</script>
</body>
</html>
我问过他们的不和谐,但到目前为止没有答案。有对荷叶边比较熟悉的朋友请帮忙
我最近发现了如何让它工作。在 ruffle.createPlayer()
返回的播放器上调用 .play 需要一个对象或至少需要一个对象。做 player.load({ url: '/path/to/swf.swf' })
会起作用
swfobject.embedSWF = function(url, cont, width, height){
var ruffle = window.RufflePlayer.newest(),
player = Object.assign(document.getElementById(cont).appendChild(ruffle.createPlayer()), {
width: width,
height: height,
style: 'width: ' + width + 'px; height: ' + height + 'px',
});
player.load({ url: url });
}
GitHub 上的示例:https://github.com/e9x/ruffle-example/
完整代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf8'>
</head>
<body>
<div id='ruffle'></div>
<script src='https://e9x.github.io/ruffle-example/ruffle.js'></script>
<script>
var swfobject = {};
swfobject.embedSWF = function(url, cont, width, height){
var ruffle = window.RufflePlayer.newest(),
player = Object.assign(document.getElementById(cont).appendChild(ruffle.createPlayer()), {
width: width,
height: height,
style: 'width: ' + width + 'px; height: ' + height + 'px',
});
player.load({ url: url });
}
swfobject.embedSWF('https://e9x.github.io/ruffle-example/1on1soccer_24.swf', 'ruffle', 500, 500);
</script>
</body>
</html>
您还没有为播放器创建<div>
。
<body>
和 </body>
之间的所有以下代码:
<div id="container"> </div>
<script src="ruffle/ruffle.js"></script>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("container");
container.appendChild(player);
player.load({
url: "mig29.swf",
backgroundColor: "#000",
});
player.style.width = "450px";
player.style.height = "450px";
});
</script>
记得在您的 .htaccess
中添加此行并上传:
AddType application/wasm .wasm wasm
另外,记得将整个 ruffle selfhosted 地毯(6 个文件)上传到根目录。
我需要帮助将 swf 实施到我的 HTML 带有荷叶边的网站 (https://ruffle.rs/),我将“AddType application/wasm .wasm”添加到 httpd.conf 中apache,这是我的代码,但它没有显示在我的本地主机服务器上:
<html><head><script src="ruffle/ruffle.js"></script>
</head>
<body>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("container");
container.appendChild(player);
player.load("mig29.swf");
});
</script>
<script src="ruffle/ruffle.js"></script>
</body>
</html
我也试过这个代码,也没有运气:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>WORKAROUND</title>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.RufflePlayer.config = {
"public_path": "ruffle/",
"polyfills": ["static-content", "plugin-detect", "dynamic-content"]
};
</script>
<script src="ruffle/ruffle.js"></script>
<!-- Start workaround -->
<script>
const swfobject = {};
</script>
<script>
Object.defineProperty(swfobject, "embedSWF", {
value: function() {
var ruffle = window.RufflePlayer.newest();
var player = ruffle.create_player();
var container = document.getElementById(arguments[1]);
container.innerHTML = "";
container.style.width = arguments[2] + "px";
container.style.height = arguments[3] + "px";
player.style.width = container.style.width;
player.style.height = container.style.height;
container.appendChild(player);
player.stream_swf_url(arguments[0]);
},
writable: false,
configurable: false
});
</script>
<!-- End workaround - This code also works if placed before <swfobject.js> -->
<script src="swfobject.js"></script>
</head>
<body>
<div id="file_div">Flash Player not detected!</div>
<script>
swfobject.embedSWF("mig29.swf", "file_div", "550", "400", "8");
</script>
</body>
</html>
我问过他们的不和谐,但到目前为止没有答案。有对荷叶边比较熟悉的朋友请帮忙
我最近发现了如何让它工作。在 ruffle.createPlayer()
返回的播放器上调用 .play 需要一个对象或至少需要一个对象。做 player.load({ url: '/path/to/swf.swf' })
会起作用
swfobject.embedSWF = function(url, cont, width, height){
var ruffle = window.RufflePlayer.newest(),
player = Object.assign(document.getElementById(cont).appendChild(ruffle.createPlayer()), {
width: width,
height: height,
style: 'width: ' + width + 'px; height: ' + height + 'px',
});
player.load({ url: url });
}
GitHub 上的示例:https://github.com/e9x/ruffle-example/
完整代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf8'>
</head>
<body>
<div id='ruffle'></div>
<script src='https://e9x.github.io/ruffle-example/ruffle.js'></script>
<script>
var swfobject = {};
swfobject.embedSWF = function(url, cont, width, height){
var ruffle = window.RufflePlayer.newest(),
player = Object.assign(document.getElementById(cont).appendChild(ruffle.createPlayer()), {
width: width,
height: height,
style: 'width: ' + width + 'px; height: ' + height + 'px',
});
player.load({ url: url });
}
swfobject.embedSWF('https://e9x.github.io/ruffle-example/1on1soccer_24.swf', 'ruffle', 500, 500);
</script>
</body>
</html>
您还没有为播放器创建<div>
。
<body>
和 </body>
之间的所有以下代码:
<div id="container"> </div>
<script src="ruffle/ruffle.js"></script>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("container");
container.appendChild(player);
player.load({
url: "mig29.swf",
backgroundColor: "#000",
});
player.style.width = "450px";
player.style.height = "450px";
});
</script>
记得在您的 .htaccess
中添加此行并上传:
AddType application/wasm .wasm wasm
另外,记得将整个 ruffle selfhosted 地毯(6 个文件)上传到根目录。