我正在研究一种游戏,它涉及触发30个小视频文件中的一个,具体取决于你获得的结果.由于视频需要在用户互动后立即播放,理想情况下我希望将视频预先加载并准备就绪.
我已经添加了PreloadJS,排队了我需要的所有资产.
查看检查器中的"网络"选项卡,我可以在加载屏幕上看到所有20mb的视频传输.
但是,当播放剪辑时,它似乎是重新下载它们而不是从内存中播放它们...
我认为一旦文件被下载,他们只会留在浏览器缓存中,一旦我尝试加载具有相同src的文件,它就会从下载的资产池中提取它,但这似乎不是是这样的......
知道如何在不向页面添加30个视频播放器的情况下将下载的文件保存在内存中吗？
谢谢!
GER
我使用Preload JS来加载我的图像.然而,其中一些图像需要在CSS中作为背景图像注入.但这不起作用.
当我将'背景'传递给$('.main').css('background-image','url('+ img +')'); HTML是"background-image:url(http://127.0.0.1:8080/undefined);"
我的问题是我想预加载图像,通过它的ID获取它并将其写入CSS Background Image.我该怎么做呢？
查看事件路径只是 - blob:http%3A // 127.0.0.1%3A8080/3694c430-db8f-4543-a85e-9d1b9e8da50d
如果我将图像放入我的CSS中,我可以看到它是双重加载的.加载CSS图像,然后PreloadJS再次加载它们.
我通过追踪HandleFileLoad事件来实现它.获取ID然后注入event.result.currentSrc但它需要很多代码重复.
if(event.item.id === 'slide1'){
$(".slide1").css({"background-image": 'url('+event.result.currentSrc+')'});
}
但是,如果我有很多图像可以推进到背景中,这并不理想.
任何帮助,将不胜感激.
以下是我的代码.
var preload;
var loader;
var manifest;
manifest = ([
{id: 'background', src:'Main_1_Background.jpg'}
]);
preload = new createjs.LoadQueue(true, 'img/');
preload.on('fileload', handleFileLoad);
preload.on('progress', handleOverallProgress);
preload.on('fileprogress', handleFileProgress);
preload.on('error', handleFileError);
preload.setMaxConnections(5);
preload.loadManifest(manifest);
// File complete handler
function handleFileLoad(event) {
console.log(event);
console.log(event.item.id);
var img = preload.getResult("background",true);
$('.main').css('background-image', 'url(' + img + ')');
}
// File progress handler
function …我试图预加载一组SVG对象并使用CreateJS/PreloadJS显示它们.到目前为止,我能够显示一个没有预加载的SVG对象,但是一旦我使用PreloadJS的LoadQueue,我就无法让我的样本工作.
有人知道我在做错了什么吗？谢谢!
http://jsfiddle.net/trudeo/05eqqp49/
使用Javascript
var imageManifest = [
{ id: "MySvgImage", src: "http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg" }
];
var stage = new createjs.Stage(document.getElementById('gameCanvas'));
var assetQueue = new createjs.LoadQueue(true);
assetQueue.loadManifest(imageManifest);
assetQueue.on('complete', complete);
function complete(e) {
// DOESN'T WORK
var svgImage = new createjs.Bitmap(assetQueue.getResult('MySvgImage'));
stage.addChild(svgImage);
// WORKS
var svgImage2 = new createjs.Bitmap("http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/circles1.svg");
stage.addChild(svgImage2);
stage.update();
createjs.Ticker.setFPS(40);
createjs.Ticker.addListener(tick);
}
function tick() {
stage.update();
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<canvas id="gameCanvas" width="800" height="800"></canvas>
</body>
</html>
我有一个使用 preloadJS 加载资产的游戏。我在使用 soundJS 的 iPad 上遇到了各种声音问题，但从测试看来，使用 howler.js 的音频播放得很好，所以我正在考虑在 iPad 上使用该库。
我的问题是，是否有一种方法可以使用预加载了 preloadJS 的 howler.js 访问和播放声音？
我正在编写一个 CRA + Electron 应用程序，我需要使用 ipcRenderer.invoke 进行进程间通信。我能够使 ipcRenderer.send 和 ipcRender.on 在 contextIsolation 模式下工作，但 ipcRender.invoke 却没有成功。由于某种我不明白的原因，我无法以任何形式（承诺或值）将处理程序响应返回给渲染器，我得到的只是“未定义”值。
预加载.js
const { contextBridge, ipcRenderer } = require('electron');
// whitelist channels
const validChannels = ["toMain", "fromMain", "invokeMain"]
// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
"apiKey", {
sendApi: (channel, ...args) => {
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, ...args);
}
},
onApi: (channel, func) => {
if (validChannels.includes(channel)) {
// Deliberately strip event in func …preloadjs ×5
createjs ×3
javascript ×3
caching ×1
electron ×1
howler.js ×1
html5-audio ×1
html5-video ×1
ipcrenderer ×1
preload ×1