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.

The files array has two accepted formats:

• A string
• An object

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

When given an object it looks at four potential properties:

• file (the name, which may include string substitution formatting)
• delay (to override the parent, or used as a multiplier for videos or gifs)
• range (used to iterate over a numeric range or hard-coded array of substitutions)
• latency (used for gif and video with delay as an optional multiplier)

The string format substitution works with two options:

• direct replacement of %s
• left-padded (eg. %03s creating 001, 002, 003, etc...)

A file name can contain multiple substitutions and multiple formats, all of them will be recursively processed.

The range is an array with a start and end for a numeric loop, or raw values that can be numbers or strings.

This system supports video files with the extensions of mp4, webm, and ogg. Due to browser limitations videos are treated as muted by default.

When the file is a video or ends in .gif, an attempt will be made to extract the duration of the video or animated gif, and an updated value will be set to latency. If delay was provided, it will be treated as a multiplier.

The system attempts to preload up to 40% (or +-5) of the next and previous files which should prevent stutter when rendering.

Simple operations are exposed to allow manipulation:

• toggle() - change play state
• next() - go to the next image
• previous() - go to the previous image

If the target window is not active, the rendering operation will be paused.

gifDuration bypass

Security on browsers may prevent gifDuration from being calculated when loading local files　without a web server.

To resolve this you can set security.fileuri.strict_origin_policy to false in firefox, or launch google chrome with the --allow-file-access-from-files flag.

Another option would be to set the latency property manually.