show

show

A system for rendering sequences of various media, including images and videos.

It leverages addEventListener for preloading, and requestAnimationFrame for real-time rendering.

This is an optimized and simplified replacement for jslideshow.

usage

The demo.html included demonstrates full screen styles, importing, and loading a set of files.

A new instance of Show accepts three parameters:

• parent element to insert the slideshow
• array of files in two different formats
• default duration or delay per displayed media

The parent element will have its children replaced.

There are two formats for files.

• A string
• An object

The string is treated verbatim and assigned the default delay value.

The only required value is file.

The object format supports an optional delay as an override.

If you are working with a group of files then the range array property is useful.

As an array it supports two numbers as minimum and maximum, or a set of string substitutes.

When range is present the file property will be treated as as "format string", which supports these formats:

• a direct string replacement (eg. %s)
• a left pad (eg. %03s creating 001, 002, 003, etc)

Substitution only supports individual characters not whole patterns, but they do not need to be numbers.

If the file is a video it will substitute the default delay for the video duration, otherwise it will treat the delay as a multiplier allowing the video to loop a specified number of times.

This system supports video files with the extensions mp4, webm, and ogg. Due to browser behavior (namely Google Chrome), videos will be muted.

The system preloads all files and beings playing automatically.

It provides a toggle() function to change its state.

If the target window is not the active window the loop will be halted.