DEMO: Video Player

It’s 2016 and I’m back into the swing of things with this first post and demo.

Dave Anderson set the e-learning heroes the first challenge of the year: to create an interaction for presenting videos in e-learning. Videos are being used more and more in e-learning, so I set to work.

The Inspiration

I have an ‘Ideas and Sketches’ book, where I jot down or draw any news ideas for courses or interactions. Often these ideas come from things I see, like graphics or TV or movies. Now, I live in Australia; this particular idea came from (being forced to watch) cricket. The opening scene after the commercial break featured a cricket ball flying on to the screen and then the ball’s two halves flying out of the screen to the left and the right, revealing a video. I remember jotting this down as an ‘idea to try out’ and added some other potential similar ideas, like a cupcake opening to reveal a video or a toolbox doing the same.

The Process

I wanted to create a video player to show three videos, each using one of the ideas mentioned above. I really liked the film reel Michael Hinze used in this demo. I found a similar type of graphic and created a simple black background with large block, colourful letters.

What I wanted to show with this interaction was some creative ways to show video, so I didn’t worry too much about using video controls or allowing the user to pause, or scrub; the videos are short enough samples, and the user can go to the next one easily by using the bottom video menu.

Finally, for each video I found relevant images to use as backgrounds. The cupcake and toolbox were vector images I tinkered with, and the cricket ball I created easily in PowerPoint.

The Result

See for yourself—I can see this approach working well for any kind of course. How about a corporate induction course with video messages from senior staff? Or, a safety course with videos of important safety procedures? Do you have any other ideas? Go on, pop ’em into the comments below… and click the image below to play with the demo.