Your Development & Design Resource

HTML5 Video Custom Control for IBM XPages

XPages During the XPages Markup Ultra Combos article yesterday, I showed a simple HTML5 Video Element Custom Control. While it would have worked as shown, I took into consideration a few things - specifically that you could have more than 2 media types depending on the specific browser (and browser version) you're using - so I redesigned it.

Here's the updated version of an HTML5 Video Element Custom Control:

<?xml version="1.0" encoding="UTF-8"?>

        <xp:repeat value="#{compositeData.source}" var="source">
            <source src="#{source.source}" type="#{source.type}" />
            escape="false" />


I've made the source Property a Property Group, allowing me to define both a source and a type Property for each version/format of a given video. I've also included things like a noHTML5 Property, which allows you to throw your own markup in there (note the escape="false" Property on the xp:text Control) to display when someone hits it with Internet Explorer 4.

Here's an example of the HTML_Video.xsp Custom Control for use in XPage markup:

   noHTML5="Your browser does not support the video tag."
           type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
           type='video/ogg; codecs="theora, vorbis"'
           type='video/webm; codecs="vp8, vorbis"'

This use of the HTML5_Video.xsp Custom Control generates the following HTML markup:

<video controls="controls">
    <source src="Chrome_ImF.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
    <source src="Chrome_ImF.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;">
    <source src="Chrome_ImF.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">
    <span class="">Your browser does not support the video tag.</span>

Live Demo

HTML5 Video Custom Control Online Demo

In closing...

Please note - as this is the whole point of this latest series of articles - that I said "Here's the updated version of an HTML5 Video Element Custom Control...". This HTML_Video.xsp Custom Control is a Custom Control. It's not the Custom Control for HTML5 Video Elements. You can create your own Custom Controls that spin out whatever markup you'd like. This one just so happens to generate an HTML5 Video Element, but there's absolutely nothing stopping you from writing your own that's better and specific to your individual needs.

This HTML5 Video Custom Control could very well have been an Audio, Canvas, Details, or any other HTML5 Element Custom Control.

The point is, if your XPages palette is missing some Control... make one.

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.

More from is powered by IBM Notes Domino XPages & hosted by Prominic.NET

Contact Us

Use our Contact / Feedback form or one of these email addresses:

Creative Commons License

Except where otherwise noted, by Chris Toohey is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.