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>
