Immersive multimedia presentations.
Show and Tell is a HTML & Javascript application designed to run in the web browser, locally on a computer. The application is optimized for instant transitions with no perceptible media latency when switching between media sources. Show and Tell is not optimized to be hosted on the internet and may load very slowly & use tons of bandwidth if put online.
- Right Arrow - Activate the next transition
- Left Arrow - Activate the previous transition
- Up Arrow - Rewind all media to the beginning
- Space Bar - Play / Pause
As Show and Tell is an offline app, you must have all of your media locally.
Everything you need to configure is in the storyboard.js file.
Video
supported formats: mp4
Image
supported formats: jpg, png, gif
Audio
supported formats: mp3
Note that other audio & video formats are supported in some browsers by the HTML5 media player, but these are the only one with true cross-browser compatibility.
The storyboard in Show and Tell is based on a series of transitions, as a list of Javascript objects. Transitions consist of either an audio component, a visual component, or both.
An example storyboard.js file is as follows:
// Initialize Media (Last items initialized are on top)
image = new Image({file: '078-0045.jpg'});
mash = new Video({file: 'mash.mp4', volume: 1.0});
engine = new Video({file: 'engine.mp4', startTime: 1.0});
dp = new Video({file: 'dp.mp4'});
ski = new Video({file: 'ski.mp4'});
slide = new Video({file: 'slide.mp4'});
smetana = new Audio({file: 'smetana.mp3'});
transitions.push(function(){
mash.in(1000);
smetana.in();
});
transitions.push(function(){
mash.out(1000);
engine.in(1000);
});
transitions.push(function(){
engine.out(0);
slide.in(0);
smetana.out(10000);
});
transitions.push(function(){
slide.out(1000);
image.in(1000);
});
transitions.push(function(){
image.out(1000);
});