I do a lot of panels at various conventions. When I do these panels, I need some sort of visual aid. For this I usually turn to Powerpoint, and its alternatives. The thing is, these just plain suck, at least for my purposes. They have a zillion features that allow people to make really bad presentations. Meanwhile, the feature that I really want, which is video, effectively doesn’t work.
It dawned on me that because of HTML5, it should actually be possible to create an HTML presentation with video that is seamless. Today I went ahead and prepared a video-centric panel for Connecticon, and I did it all in HTML5. I realized afterwards that I should build this into a tool, so that others can use it as well. Hence, Presentoh was born.
http://github.com/Apreche/Presentoh
The idea is really simple. There are only four kinds of slides I think you should be using: title slides, bulleted lists, videos, and images. I built a simple HTML template which could handle all four types of slides. I made a brain-dead simple CSS style for it which entails white text on black background. The black background also looks more professional because photos and videos really stand out. Also, it looks better when using a projector in a dark room because you can’t see the borders of the projection.
The only catch was that I wanted to use my Logitech Cordless Presenter. I went out and found jquery.hotkeys, which allowed me to bind any key on the keyboard to move between slides by redirecting in JavaScript. Problem solved.
All you have to do to use Presentoh is create a file containing JSON which defines all the slides in your presentation. Then you just run the presentoh.py script, tell it which json file you want to use, and it spits out all the HTML files for your presentation. Find the first slide in your presentation, open it in your browser, go full screen, and rock and roll.
I think it’s pretty awesome that while this tool is really hacky, and doesn’t have any error checking, it still beats out Google Docs, Powerpoint, Open Office, and all the rest in terms of how it handles video. There are some slight catches, but nothing that can’t be worked around. For example, you have to make sure all of your videos are the right codec for the browser you are using. My H.264 videos obviously didn’t work in Firefox.
Also another issue is that there is no way to automatically make an HTML5 video go full screen. If you’re wondering why, the answer is on stackoverflow. Therefore you have to manually specify the height and/or width of each video depending on its aspect ratio, and the resolution you will be presenting in. This is to prevent videos from going off the edges of the screen if they are too wide or too tall, and to prevent aspect ratios from being broken.
All the rest of the information can be found in the README file. I hope Presentoh helps somebody out there with their presentation needs. Enjoy.
