I have approximatively 500 images that differ very slightly one from another. They are all of the same size. They hence form a sort of video when watched one after the other very fast.
I am looking for a way to display them in a browser (html file from disk), all in the same spot, to form that video looking effect. I want to be able to play, pause, stop, play faster, play slower (and if possible even more controls, such as maybe go to specific time (ie, image 47, if there's a slider for example; if there's only play,pause,fast and slow it's okay though).
I am not a programmer but I think javascript might do that. If there's a better technology, please redirect me to it. I'm just looking for a solution that works the way I intend, but I have no javascript knowledge. This surely has been done before though, so I would gladly accept a working solution.
Although you seem to be going the conversion route, here is a solution that uses javascript, allows pausing, jump to frame, and changing speed (I didn't bother with a slider for this [or a nice UI for any of it]):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="launch()">
</body>
<script>
var frames=['frame1.png','frame2.png','frame3.png','frame4.png','frame5.png','frame6.png','frame7.png','frame8.png','frame9.png','frame10.png'];
var playing=true;
var on_frame=0;
var timer;
function launch(){
document.body.innerHTML='<img id="film" src="frames/'+frames[on_frame]+'"/><br/><button id="actionbutton">Play</button><button onclick="stop()">Stop</button><br/>Milliseconds between frames:<input type="text" id="framerate" value="50"/><br/>Go to frame:<input type="text" id="gotoframe"><button onclick="goFrame(document.getElementById(\'gotoframe\').value);">Go</button>';
document.getElementById('actionbutton').addEventListener('click',play);
play();
}
function change(){
document.getElementById('film').src='frames/'+frames[on_frame]; //I have my images in a folder named frames
on_frame++;
if(on_frame==frames.length){on_frame=0;}
if(playing){
timer=setTimeout(change,document.getElementById('framerate').value?document.getElementById('framerate').value:50);
}
}
function play(){
document.getElementById('actionbutton').removeEventListener('click',play);
document.getElementById('actionbutton').addEventListener('click',pause);
document.getElementById('actionbutton').innerHTML='Pause';
clearInterval(timer);
playing=true;
change();
}
function pause(){
document.getElementById('actionbutton').removeEventListener('click',pause);
document.getElementById('actionbutton').addEventListener('click',play);
document.getElementById('actionbutton').innerHTML='Play';
playing=false;
}
function stop(){
document.getElementById('actionbutton').removeEventListener('click',pause);
document.getElementById('actionbutton').addEventListener('click',play);
document.getElementById('actionbutton').innerHTML='Play';
playing=false;
on_frame=0;
}
function goFrame(x){
if((x>-1)&&(x<=frames.length)){
on_frame=x;
if(!playing){document.getElementById('film').src='frames/'+frames[on_frame];}
}
else{
alert('Out of range');
}
}
</script>
</html>
Related
I just try to test a very basic program in javascript but on my computer it does not work. It works on other computer but not mine. I'm launching it on chrome which has javascript activated. There is my code:
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js">
</script>
<script src="script.js" type="application/javascript;version=1.7"></script>
</head>
<body>
</body>
</html>
script.js
function setup() {
createCanvas(400,400);
background(0);
var x = random(0,200);
rect(x,x,(200-x)*2,(200-x)*2);
}
function draw() {
}
In my folder I have also an asset folder which is empty and my style.css is empty. With this code I am supposed to have a black square on my screen (the canvas) but there is nothing, and when I check the console on chrome nothing is written. Moreover, the first time I launched index.html a file named debug.log appears:
debug.log
[0126/184004.266:ERROR:settings.cc(263)] Settings version is not 1
Why does this script work on other computer but not mine ?
Thanks for helping.
All of your audio your files listed in the JavaScript code MUST be named as HTTPS, not HTTP. And obviously, that means the website(s) you are linking to (including yours) must be secure. That is, you need to have your security certificates, and make sure they are activated. It's a security issue with Chrome. I hope that helps. = -)
You need to call your function:
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<script src="script.js" type="application/javascript"</script>
</head>
<body>
</body>
</html>
script.js
function setup() {
createCanvas(400,400);
background(0);
var x = random(0,200);
rect(x,x,(200-x)*2,(200-x)*2);
}
function draw() {
}
setup(); // that is a function call
I tested this on Firefox and Chrome and it works. Javascript is interpreted by your browser, it has nothing to do with your computer. If the exact setup above doesn't work for you then check here. If JS is enabled and it still doesn't work then try removing the p5.js script. If that still doesn't fix it then reinstall Chrome (or even better switch to Firefox)
The accepted answer would be correct if you were not using P5.js. But since you are, you should not call the setup() function yourself! Instead, you need to let P5.js do that for you automatically. It might work with this simple example, but you'll have other problems with e.g. draw() not being called 60 times per second. If setup() and draw() are not being called, that means you're not loading the library correctly.
You need to check your developer tools for any errors, both in the JavaScript console and in the network tab.
My guess is that you're accessing your page as a file:// URL, which can have problems. You need to run a local server and access your files that way instead.
I am trying to make this simple weather radar click the damn play button when the page loads and have tried many things. The funny thing is, this bookmarklet works on it:
javascript:document.getElementsByClassName('playerButton play').click();'
But I have tried inserting this into the HTML page with so it runs the radar on page load but can't get it to work without a bookmarklet. BTW, I am not savvy with JS or HTML by any means. Would appreciate help, thank you.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Full Screen Radar
</title>
</head>
<body>
<script type="text/javascript" src="http://widgets.wsi.com/1.1/wx.loader.min.js?cid=880798159"> </script>
<div class="radarContainer" style="width:100%; height:100%;">
<wx:map scriptId="wxMap" memberId="1167" mapId="0020" templateId="0011" persistOpacity="false" zoomLevel="9" latitude="27.3113" longitude="-82.5957" opacity="0.6" menuItems="0001,1102"/>
</div>
</body>
</html>
GOT IT!!! It was simple timing issue. All the javascript tricks of waiting the page to finish loading did not work but a 5second timer did:
<script>
setTimeout(function() {
document.getElementsByClassName('playerButton play')[0].click();
}, 5000);
</script>
It seems to me that the Audio object can not be easily played inside a JavaScript callback when running on a mobile device. The code below shows an onload function which, on a PC, plays the sound when the web page is loaded, but on Android phones plays nothing.
My uninformed guess is that the callback returns before the Audio object starts to play, and thus, for some deep reason, dies.
Is there any way over this? In the full version the JavaScript would read the sound to play from the URL.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Play Me</title>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green;font-size:50px}
</style>
</head>
<body onload="playMySound()">
<P>
PLAY ME
<button onclick="playMySound()">sound me</button>
</P>
<br>
<script>
var mySound ;
function playMySound () {
var soundUrl = "http://www.letiketa.com/myapp/sound.ashx?sound=sound1" ;
var mySound = new Audio(soundUrl);
// Actually play the sound
mySound.play() ;
}
</script>
The button plays the sound correctly, on all devices and I suppose that is a callback...? Is there something special about the onload callback?
Argh, it is all to do with the fact that on mobile devices, currently, HTML5 disallows sounds to be played unless the user has done some input, presumably saying "I allow you to play sounds." The latest Firefox browser, V34 anyway, seems to have lifted the restrictions and all works as it should.
There is a fix in Chrome too, you need to, in the address bar, goto "about:flags" and find the "gesture required" option, disabling it.
After all this the program which I wrote two days ago now works...
I have a Processing sketch that I want to embed in a landing page inside a that will prompt the user to press a button and enter the site.
The function to receive the mouse click is inside the Processing file but needs to change the displayed html page - how can I do this?
<html><head>
<meta charset="utf-8" />
<title>Landing page before the main site</title>
<script src="processing-1.4.1.min.js"></script>
</head><body>
<canvas id="lander" data-processing-sources="lander/lander.pde"></canvas>
</body></html>
And the Processing sketch has the function:
void mousePressed(){
if(overBox){
// push the displayed page to home.html
}
}
Aside from being a terrible idea because you've now locked away what should be web functionality into a canvas (this is what we hate about Flash, too), you're in JavaScript context, so you can just call window.location = "http://...."; and it'll work.
That said, there is absolutely no reason to do what you're about to do here. An HTML5 button label and CSS to style it to look like your button is all you need, using Processing is plain old "you'r doing it wrong" in this instance.
Here's the situation:
Client wants a looping SWF file to pause for two seconds before it begins playing all over again (it's a nice build animation on a logo, but the logo doesn't stay on the screen for very long because the movie repeats so users can't see the logo for long. This is irrelevant, but good back story.)
They provided me with a SWF file, but not FLA. When I asked for the FLA I was told the hard drive that contained the FLA crashed and it cannot be retrieved. So, that is pretty much a dead-end.
Before I go and try to de-compile the SWF and all that fun stuff, I wanted to know if there was any way that this could be done with HTML and Javascript. That is:
Have the SWF loop
Pause the movie for two seconds before it restarts
What do you think?
This isn't easily possible with javascript, but it is very easy if you load the swf into another swf. You then have access to the main timeline of the original swf and you'd be able to control it. If you want to control a movie called targetMovie.swf you can do something like this:
var loader:Loader = new Loader();
loader.load(new URLRequest("targetMovie.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
addChild(loader);
var logoMovie:MovieClip;
function onComplete(evt:Event):void{
logoMovie = MovieClip(loader.content);
// call pauseMovie at end of timeline
logoMovie.addFrameScript(logoMovie.totalFrames-1, pauseMovie);
}
function pauseMovie():void{
logoMovie.stop();
// delay for two seconds;
setTimeout(function(){
logoMovie.play();
}, 2000);
}
You could simulate this entirely in javascript with swfObject. You would need to time how long the animation is, add two seconds, and make that the time before the script restarts. heres a working example with the homestarrunner intro:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn-history/r409/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function(){
startSwf()
})
var restartTime = 24500 //in milliseconds
function stopSwf(){
swfobject.removeSWF("swfLoop");
startSwf();
}
function startSwf() {
$("body").append("<div id='swfLoop'></div>");
swfobject.createSWF({data:"http://homestarrunner.com/newintro.swf", width:400, height:300}, null, "swfLoop");
setTimeout('stopSwf()', restartTime);
}
</script>
</head>
<body></body>
</html>
plug that in here: http://htmledit.squarefree.com/
Try this http://www.permadi.com/tutorial/flashjscommand/