desseMundo home

Location: http://scrupulo.com/work/demos/tutorialpoc/

I’m not sure how I came up with this one, possibly in the shower or as I dosed off one night. The idea I had was to use youtube’s api to make a web app that allows people to make and view tutorials. There are a few features yet to be programmed, and it doesn’t even work in firefox if you have adBlock installed (and I haven’t even done any testing in IE, it’s best viewed in chrome or safari), but this example works as follows: 

• The vertical bar is the trackbar for the video, the little marks are chapter markers. Users can click onlywhere in the trackbar to jump ahead, or back in the video.
• Hovering over the trackbar opens up a bubble that tells the user  some information about the step they are hovering over.
• The video can and should be divided into chapters. These chapters allow users to skip steps in tutorials. 
• The large left box holds information about each chapter.  It automatically slides to new chapters when they are changed.

It’s nowhere near done yet. Obviously I need to add things like a volume bar, and pin down some js issues with the slide-throughs on the steps. It’s going to be styled, but it’s a lot easier to work with when things aren’t shiney. 

There are a few problems, the first being the timing on the is a bit off, this happens because you can’t skip to any point in time in the video, only keyframes, which occur about every 1 seconds. So while It’s not that bad, shorter videos, like the one in the example, suffer a bit. Also caused by the keyframes is the pixels-per-second on the trackbar being off, so if you watch this video, they actually spill over at the end by about 3 pixels. 

The future for this project is in the air. I know a few things: it will be released open source, if it is released. Additionally, there will probably be a full website for it, where users can make their own tutorials which will probably be able to be built on top of not only youtube videos, but also for sites like vimeo.