Question

I want to develop HTML 5 based slideshow with images and videos on full screen. this will be some sort of screensaver on one of our kiosks when there is no user activity for a couple of minutes. we already have image based slideshow on full-screen implemented so there is no problem with this, but now we want to add Video auto-playback functionality as well so for example lets say this is the order of screensaver content

• image.jpeg
• image2.jpeg
• videoclip.mp4
• image3.jpeg
• someothervide.mp4

after jquery script runs we want to run through those files continuously and either show image for few seconds or auto-start video and move to the next slide when playing video is finished

can someone suggest how to do this and if there are any already implemented plugins for jQuery can you provide with links?

Answer 1

Actually this is pretty easy to solve. Find all explanations within the comments of the JavaScript. Wrap that all in a closure like $(document).ready(function () {}); and you’re ready to go.

HTML

<div id="canvas" class="canvas"></div>

CSS

div.canvas {
    display:           table-cell;
    width:             1280px;
    height:            800px;
    background:        black;
    vertical-align:    middle;
}

div.canvas > video {
    display:           block;
    margin:            auto;
}

div.canvas > img {
    display:           block;
    margin:            auto;
}

JavaScript – Variables

// array containing links to the content
var content = ['movie_1.m4v', 'movie_2.m4v', 'image_1.jpg', 'image_2.jpg'];
// element where anything will be played
var canvas = $('#canvas');
// duration an image is shown in ms (milliseconds)
var durationImage = 1000;
// basic source for image and video tag
var srcImage = '<img src="$" alt="">';
var srcVideo = '<video autoplay><source src="$" type="video/mp4"></source></video>';
// current position
var current = -1;
// regex for getting file extension (from http://stackoverflow.com/questions/680929/how-to-extract-extension-from-filename-string-in-javascript)
var regex = /(?:\.([^.]+))?$/;

JavaScript – Function

// method to play the next content element
function playNext() {
    // increase current element and set it to 0 if end is reached
    ++current;  
    if (content.length == current) {
        current = 0;
    }
    // get file and its extension and check whether it's valid
    var source      = null;
    var file        = content[current];
    var extension   = regex.exec(file)[1];
    if ('jpg' == extension) {
        source      = srcImage;
    }
    if ('m4v' == extension) {
        source      = srcVideo;
    }
    // if source seems valid
    if (null !== source) {
        // replace placeholder with the content and insert content into canvas
        source  = source.replace('$', file);
        canvas.html(source);
        // if content is an image play next after set duration
        if ('jpg' == extension) {
            setTimeout(function() { playNext(); }, durationImage);              
        }
        // if content is a video, bind 'onend' event handler to it, to play next
        if ('m4v' == extension) {
            canvas.find('video').bind("ended", function() {
                playNext();
            });
        }
    }
}

JavaScript – Finally: initial function call

// show first (remember current = -1 from above :) )
playNext();

Demo

Demo on jsfiddle.net

A note on the demo: The demo runs in Safari only (maybe in IE9 too) because of the video format provided (video/quicktime).