0

this code makes a slideshow(a very long fast slide show, video), it plays audio and can adjust its frame size.
i have 4 streams(4 diferent groups of jpegs from 4-50kB @720x480), and can switch between them.
audio is nearly automatically in sync and both it and the "video loops".
using chrome task manager i can see bandwidth usage (albeit form local disk) @ 900 KBs. 30 jpegs per second (at lowest quality) 30*5=150KBS + audio (mp3 700kb @ 128kbps)? maybe its loading more than what is needed?

a few useless variables and i dont know how to use functions.

i want also to:
stop the audio
image overlay for the video (with a play button with event onhover)
interactive progress bar for audio(so the images could sync with the audio)
slow down or speed up video and audio
easy way to implement rollover images(for buttons)
proper fulscreen
independent element resizing(like browser text field)
caching and prefetching frames
have multiple audio support(like i have with my bandwidth button)

**note i dont have any html s/w been using notepad/gedit!
**note files can be found here

// JavaScript Document
var stream = 1;
var streamval = 1;
var c = 1;
var current_c = c;
var state = 0 ;
var frame = " " + "(" + c + ")" + ".jpeg"; 
var Frate = 1;
var frame_rate = 45;
var max_frame = 1265;
var screen_onclick = 0;
var resol_button = 0;
var hd = 0;
var expand = 855;
var vga_width = 640;
var expand_rate = 0;
var current_resolution = 480;
var screenW = window.innerWidth;
var screenH = window.innerHeight;
var fullscreen = 0;
var frame_button = 0;

//var screenW = screen.Width;
//var screenH = screen.Height;

/* Preloading images */
var image1 = new Image();
image1.src = "1 (1).jpeg";

/* preload audio */
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'sk8rman.mp3');
audioElement.load();


function play_aud()
	{
		if (state == 1 )
		audioElement.play();
		if (state == 2 )
		audioElement.pause();
		}
		
function new_image()
	{
		
		}

function disp_img(w)
   {
	  if (state == 1 )		
			{ 
			if (c == max_frame)
				 {
				 c = 1;
			 	}
			var img_src = streamval + " " + "(" + c + ")" + ".jpeg";
			document.ani.src = img_src;
			c++;
			if (screen_onclick = 1)
				{
					state == 2;
				}
			audioElement.play();
			}
		
			if (resol_button == 1)
				{
					document.ani.width = expand;
					document.ani.height = 480;
						if (document.ani.width = current_resolution)
							{
								if (current_resolution < expand)
									{
									current_resolution = current_resolution + expand_rate
									}
								if (current_resolution < 700 )
									{
										expand_rate = 40
									}
								if (current_resolution > 830 )
									{
									expand_rate = 2
									}
							}
			}
		
		if (resol_button == 2)
			{
				document.ani.width = vga_width;
				document.ani.height = 480;
				if (document.ani.width = expand)
						{
							if (current_resolution > vga_width)
								{
									current_resolution = current_resolution - expand_rate
									}
							if (current_resolution > 660 )
								{
									expand_rate = 40
									}
							if (current_resolution < 660 )
								{
									expand_rate = 2
									}
							}
			}
					
		if (state == 2 )
			{
				c == current_c;
				audioElement.pause();
			}
			
	  	if (state == 3 )
			{
				c = 1;
				audioElement.stop();
			}
			
	  	if (state == 4 )
			{
				if (c > 0)
					{
						c--;
					}
			}
		if (screen_onclick = 1)
			state == 1;

		if (fullscreen == 1)
			{
				document.ani.width = screenW;
 				document.ani.height = screenH;
			}
			
		if (fullscreen == 2)
			{
				document.ani.width = current_resolution;
 				document.ani.height = 480;
			}
		
		if (frame_button == 1)
			++frame_button;

		if (frame_button == 2)
			--frame_button;
		
		if (streamval > 4)
			streamval = 1;

		if  (streamval < 1)
			 streamval = 4;
		
		//document.write("<br>'frame_rate'</br>");
   }


t = setInterval("disp_img(c)", frame_rate);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" language="javascript" src="ani.jpg.js" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animated jpeg</title>
</head>

<body>
animated jpeg </p>
<a href="frames.xml">view xml</a> | <a href="ani.jpg.js">javascript</a></p>
<a onclick="state = 1" >
<img src="1 (1).jpeg" width="current_resolution" height="480" alt="animated jpeg" name="ani" />
</a>
<audio src="sk8rman.mp3" id="audio">haha your browser doesnt support htmlaudio</audio>
</p>
<button name="resolution" type="button" onclick="resol_button = 1" >16:9</button>
<button name="resolution" type="button" onclick="resol_button = 2" >4:3</button>
<button name="goback" type="button" onclick="state = 4" >go back</button>
<button name="play" type="button" onclick="state = 1" >play</button>
<button name="pause" type="button" onclick="state = 2" >pause</button>
<button name="stop" type="button" onclick="state = 3" >stop</button>
<button name="fps   up" type="button" onclick="Frate = frame_rate++" >fps +</button>
<button name="fps down" type="button" onclick="Frate = frame_rate--" >fps -</button>
<button name="Fullscreen+" type="button" onclick="fullscreen = 1"> fullscreen+</button>
<button name="Fullscreen-" type="button" onclick="fullscreen = 2"> fullscreen-</button>
<button name="hi" type="button" onclick="stream = streamval++">low bandwidth</button>
<button name="lo" type="button" onclick="stream = streamval--">hi bandwidth</button>
</body>
</html>

Edited by monstercameron: n/a

3
Contributors
5
Replies
6
Views
6 Years
Discussion Span
Last Post by monstercameron
0

what i also want to do is have javascript parse an xml file with all the image files

0

Did you write this or copy it. If you copied it, then you need to learn javascript and stop asking people what you want. We are here to fix problems that people have on there codes, not code that people copied and have no idea how it works. Sorry for being rude.

0

Did you write this or copy it. If you copied it, then you need to learn javascript and stop asking people what you want. We are here to fix problems that people have on there codes, not code that people copied and have no idea how it works. Sorry for being rude.

Yup, big corporations have paid me handsomely for developing applications like that.

(I'm not advertising, just trying to indicate the potential magnitude of the work ahead)

Airshow

Edited by Airshow: n/a

0

i got the code for the animation, then modified it for a volume of images, then i added all the other code myself. i just started college and will be doing prog langs but at teh moment i am self thought. so stop giving me crap and leave a positive/useful comment

Edited by monstercameron: n/a

0

Did you write this or copy it. If you copied it, then you need to learn javascript and stop asking people what you want. We are here to fix problems that people have on there codes, not code that people copied and have no idea how it works. Sorry for being rude.

i am not asking you to code teh program for me, it works barely. all im asking is for tips to make my code better.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.