Interactive Touchscreen Interface using jQuery and HTML5 Video

An interface to display short video clips in a gallery setting.
An interface to display short video clips in a gallery setting.

An In-Gallery Kiosk for Artist Midi Onodera

Playing a video.
Playing a video.

The touch-screen rig.
The touch-screen rig.

In 2009 artist Midi Onodera created a series of 52 short clips designed for podcasting. I have been fortunate to be involved in this project, providing technical support and new media development. When exhibition opportunities arise, such as Onodera’s recent show at Concordia University in Montreal, we grapple with ways to present these new-media-specific works in the gallery setting. Knowing Concordia had some sweet gear, Onodera chose show this series on a large touch-screen monitor. I designed and implemented the interface using web-standard technologies including jQuery and HTML5 Video.

I have posted the code on Github. It uses a jQuery vertical center function I previously created, as well as some other interface effects. One of my favourite of its features is the randomization: The thumbnails are shuffled as the page is loaded and then each moves to the end of the page upon being selected. At its core are the functions to load and play the clips.

Swapping Sources in an HTML 5 Video

The interface provides access to 53 video clips, but rather than giving each its own instance, I set up an single video element, omitting a source.

<video class="video" id="video" controls="" autoplay="" width="640" height="426"></video>

And then, when a video is selected, its source is added in and the element begins to play.

$('.video').attr('src','movies/' + movieNum + '.m4v');
document.getElementById('video').play();

But the strangest thing happened when the next video is loaded and played: The audio from the first clip would play along with the new! I tried all sorts of things, including completely unloading the video element and creating a new one for each cycle, but still the audio could be heard. What a strange bug!

In the end I found it could be solved by, upon closing the clip, pausing the playback and then removing the video source:

document.getElementById('video').pause();
$('.video').removeAttr('src');

All of this can be seen in-context over at Github.

October 27th, 2011

  • Samuel Nascimento

    That’s very nice to know that is possible to accomplish such interface for large touch screen using HTML5.

    A frind of mine would like to expose some works (pictures, songs and maybe videos) in such way. When she asked me if there was a solution, the first thing that come up was HTML5. But I wasn’t so sure if it would work for large touch screens.

    Would you have some video showing the interface you’ve developed in action?

    Thanks for sharing the idea

    • martyspellerberg

      Thanks for the kind words. Unfortunately, we did not capture any video of people interacting with the work, so I have none to share.