Handmade Hero » Forums » Code » Notes on video and how is it done?
8 posts


#15032 Notes on video and how is it done?
4 months ago Edited by Gon on April 21, 2018, 1:08 p.m. Reason: Initial post

I notice that there are notes next to the video which indicates the topics being discussed or explained at the time. These notes are clickable and functional. I think they are very useful and so I wonder if somebody could please explain to me how this is done? I'd appreciate it very much. thank you

Matt Mascarenhas
136 posts / 2 projects

Annotator, supper gatherer and slammer of thunderous high fives

#15036 Notes on video and how is it done?
4 months ago

Heya Gon! They're written by me, and you can actually see me writing them live on stream, e.g. for the latest Bitwise.

I'm writing in a markup called HMML (Handmade Markup Language), which gets processed by Cinera. The player (especially the markers with their internal clickable progress bars) was designed and programmed by @AsafG, with things like the menus (Quotes, References, Filter and Credits), keyboard navigation and the generator done by me.

The magical markers are each actually three div elements, and they basically work by using your mouse cursor's X-position within the main, full-width div to linearly interpolate between the timecode at the start and end of the marker in order to: a) Display different widths of the other two divs; and b) Jump the video to the correct time when you click. I think I've explained that correctly. As I say, this was all figured out by Asaf, and he'll be able to correct it if I got it wrong!
Asaf Gartner
32 posts

Handmade Network Staff

#15037 Notes on video and how is it done?
4 months ago

I made a thing to explain how the markers work: https://asafgartner.github.io/markers_demo/