Oct12
Using SublimeVideo HTML5 video with generated HTML
- posted by: Bruce
- 1 comment
- post a comment
Recently we pushed a massive update to Stacks, our group task management solution. Part of this update was reworking the onboarding and help process for users — instead of using totally separate pages we moved to a simple lightbox solution that could be loaded on any page. This allowed us to show a lightbox whenever it was requested programmatically or by the user. For additional flexibility (and to save loading time) we made the lightbox ajax in whatever HTML content was needed. This process works great, but it did cause a few issues with our recently implemented HTML5 video script, SublimeVideo.
A few words about SublimeVideo
SublimeVideo is not video hosting platform like Wistia, Vimeo, or Ooyala, instead it’s just a javascript player that makes populating already-hosted videos incredibly easy. On most sites you simply include the javascript snippet provided by SublimeVideo and add a class to your video elements that calls the script, like so:
<video class="sublime zoom" width="1026" height="572" ⌉
preload="none">
<source src="http://site.com/video.mp4"/>
<source src="http://site.com/video.ogg"/>
</video>This will immediately replace all of the video elements with a beautiful HTML5 player and Flash fallback for browsers that either, don’t support HTML5 video, or don’t support that particular video format. For most day-to-day scenarios this is perfect and is by far the easiest solution I’ve seen.
The Catch
SublimeVideo’s script works by looking at the source once loaded, grabbing all of the video elements, and then applying the player to those elements. However, with the Stacks lightbox solution the video elements are being loaded only after the lightbox gets ajaxed, therefore they aren’t available via the initial DOM load. This means that playing videos within the generated HTML won’t work. It also means the sublimevideo video lightbox won’t work either.
Basically SublimeVideo has two object states. First, when the script is loaded without video being detected and is waiting to be called. Second, once the object has been told there is video on the page to work with. See the states below:
The Solution
In order to get the sublime video object to run we need to load it under a document.ready function, SublimeVideo supposedly has a sublimevideo.ready function that is more accurate than document.ready but it doesn’t seem to work. Instead, use the following method to load up the sublime object when no video lives on the page:
<script src="/link/to/sublimevideo.js"></script>
<script>
$(document).ready(function() {
sublimevideo.load();
});
</script>Then, when the lightbox (or generated HTML) appears you’ll need to associate each video with the sublimevideo object (remember, it doesn’t know these new video calls even exist):
<script>
$('video.sublime').each(function(){
sublimevideo.prepare($(this).el);
});
</script>The above method will grab all the video elements with a class of ’sublime’ and push them to the sublimevideo object for preparation. That’s it, now the generated HTML will re-associate all videos and work with the player properly.
The web is no longer a mass of tables and img tags. Thanks to CSS we’ve started abstracting background effects from real content. Knowing this, there is absolutely no reason why Safari shouldn’t have a view background image option. Safari, do you really expect me to right click, inspect element, and then track down the CSS that links to that background image? Give me a break.
