dominoGuru.com

Your Development & Design Resource

HTML5 Video Custom Control for IBM XPages

05/09/2012 12:01 PM by Chris Toohey

HTML5 + IBM
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:view

    xmlns:xp="http://www.ibm.com/xsp/core">



    <video

        width="#{compositeData.width}"

        height="#{compositeData.height}"

        autoplay="#{compositeData.autoplay}"

        loop="#{compositeData.loop}"

        poster="#{compositeData.poster}"

        controls="#{compositeData.controls}"

        muted="#{compositeData.muted}"

        preload="#{compositeData.preload}">

        <xp:repeat value="#{compositeData.source}" var="source">

            <source src="#{source.source}" type="#{source.type}" 
/>

        </xp:repeat>

        <xp:text

            styleClass=""

            value="#{compositeData.noHTML5}"

            escape="false" />

    </video>



</xp:view>

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:


<xc:HTML_Video

    noHTML5="Your browser does not support the video 
tag."

    controls="controls">

    <xc:this.source>

        <xc:source

            type='video/mp4; codecs="avc1.42E01E, 
mp4a.40.2"'

            source="Chrome_ImF.mp4">

        </xc:source>

        <xc:source

            type='video/ogg; codecs="theora, 
vorbis"'

            source="Chrome_ImF.ogv">

        </xc:source>

        <xc:source

            type='video/webm; codecs="vp8, 
vorbis"'

            source="Chrome_ImF.webm">

        </xc:source>

    </xc:this.source>

</xc:HTML_Video>

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>

</video>

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 dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.