Following on from my previous post, so what if I now want to make a nice client side, but web-based application for playing videos. We can avoid using HTML for this purpose because we don’t need any search engine indexing, this means we get to use HTML5 canvas’s and a UI framework to speed up development.
Zebkit happens to be my favourite Javascript Canvas UI framework, it’s pretty quick to develop with and has most of the features of a standard desktop UI framework. What I found though is the video streaming is a bit lackluster, sure the support is technically in there but it made me long for the wonderful on-screen controls of the HTML5 video tag.
So then we can’t use the video tag in full as far as I know within a canvas, we could have a UI canvas element and a separate video element but that’s just messy. Although the video panel included with Zebkit doesn’t support drawing overlays, luckily they’ve made a very extensible API. So what we can is extend the existing video panel, overwrite the draw method and throw in some simple controls, such as seeking, pausing etc. The result of which is below…
The source for this Zebkit plugin can be found on Github, here.