Inside HubDub, Part 2

Last week, we announced our new interactive video module for Drupal, HubDub. We followed that up with a more detailed under-the-hood look at how HubDub works. Now, I’d like to take a look at a key part of the technology that drives HubDub: jPlayer.

Why Video Overlays?

As a company that specializes both in video production and web development, incorporating video with our work is a natural extension to our web development efforts. One of the more frequently requested features is an HTML overlay that permits the viewer to submit a donation or feedback on the video in question. To that end, we have been developing a Drupal module, Hubdub (sorry WordPress folks, there are no confirmed plans to create a corresponding plugin, yet), that displays videos as Drupal blocks, with the option of displaying overlays with arbitrary show/hide times. Its a useful project for us, as formerly, this sort of thing had been implemented on a case-by-case basis in template files or custom modules with little to no customization permitted.

jPlayer

For the front-end display, I am using jPlayer to render the video (with preference for HTML5 and Flash as the fallback). I selected jPlayer as a familiar and reliable video library that supports timeupdate events (very helpful for timing overlay displays).  In this current iteration of the module, we are not yet offering any jPlayer option controls on the backend, although that’s coming soon!  For the time being, it offers the bare minimum functionality: title, video URL (at this time this must be an mp4 file or RTMP stream), unlimited overlays with title, markup, and start/end time.

This current iteration does not yet provide full HTML5 cross-browser support. This requires the ability to provide fallback video formats for the video (example: mp4 is required, but webm and ogg files would be permitted to more broadly display video as an HTML5 video).  However, this will also be coming soon.

Finally, this version of the module does not support Youtube streaming, yet.  But, stay tuned.  Numerous new features are planned!

We’re always eager to hear your feedback! Please post bug reports, feature requests, and support questions in the HubDub issue queue. Next in our HubDub series, Alexis will have some tips on styling video overlays.

4Site Interactive Studios is a talented troupe of web professionals who are passionate about creating tools to support digital marketers. We love to hear from our community! Reach out to us with your thoughts and questions. And don’t forget to subscribe below to get notified when we post new blogs – no spam, just content👍🏼