A simple web page allowing to display an animated carousel of different medias sources.

Demo

Why did I do this?

I needed a simple way to display information(images, videos and web pages) on a monitor in a public room. I wanted to have the less friction possible when modifying the content shown and multiple media types needed to be supported. I decided to use a simple data structure(see code below) to describe the items to display and some Javascript on the web page iterates through the array and updates the DOM accordingly.

////////////
// Data
////////////
/*
Format:

{
    "title": "",
    "duration": 10,
    "type" : "image | video",
    "source" : "assets/item.xyz"
}
    where 
        - title should be maximum 75 chars long
        - duration is in seconds, default is 10 seconds
        - source is the path to the resource(videos must be in .mp4)

*/

const items = [
    {
        "type": "image",
        "duration": 5,
        "source": "assets/demo-image.png"
    },
    {
        "title": "You can add a title",
        "type": "video",
        "source": "assets/demo-video.mp4"
    },
    {
        "title": "Load a remote web page...",
        "duration": 5,
        "type": "web",
        "source": "http://fast.com/"
    },
    {
        "title": "or a local HTML document!",
        "duration": 5,
        "type": "web",
        "source": "assets/demo-html.html"
    }
]