Monday, 20 April 2015

Responsive html5video() in XPages

A few days ago I was asked how html5video() could be used in XPages, in combination with Bootstrap, and how this could be made responsive. This involved 'homemade' videos which were not published on youtube or other media. In this article I give a basic example of how a 'homemade' video can be added to an XPages application using html5video () and how to make it responsive. This example does not work for videos from Youtube or Vimeo seen these are delivered via iframes. More about that in the next blog post.

html5video() is a jQuery plugin to easily control & customize your HTML5 video player.
The HTML markup structure is pretty simple.

<video width="370" height="214" id="video1">
   <source src="video/namevideo.ogv" type="video/ogg">
   <source src="video/namevideo.webm" type="video/webm">
   <source src="video/namevideo.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

The following settings are available.

Property
Default
Description
controls false show / hide video controls
autoplay false Sets video should start playing as soon as it is loaded
playSelector null jQuery selector trigger playing video
pauseSelector null jQuery selector trigger pausing video
stopSelector null jQuery selector trigger stoping video
fullSelector null jQuery selector trigger full screen mode
timerSelector null jQuery selector current time container
durationSelector null jQuery selector video duration container
barSelector null jQuery selector progress bar container
volume 0.5 set volume

In XPages we can use html5video() in the following manner.
First we have to add the jquery.html5video.js file to the WebContent Folder in the Package Explorer.
For this purpose I created a new Folder 'videojs'.


Next we need to include jquery.html5video.js on the XPage / Custom Control. In this example I include all files on an XPage.

<script type="text/javascript" src="videojs/jquery.html5video.js"></script>

Further we need the great XSnippet by Mark Roden, x$ jQuery selector for XPages and include it on the XPage. You can add the XSnippet to the Script Libraries.


<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>

The script itself can be made up as follows. The script can be built up to your own preferences using the settings shown above. The name of the id in the script must correspond with the name which is included later on in the video tag.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:video1}" ).html5video({
    controls : true,
    autoplay : false
    });
    }
  );
  ]]></xp:this.value>
</xp:scriptBlock>

Next we can build up the video tag. In this example I added the video itself in the WebContent Folder in the Package Explorer.


<video width="570" id="video1">
<source src="video/Circle II Circle Almelo Naxtstage 2014.mp4" type="video/mp4"></source>
Your browser does not support the video tag.
</video>

Remark: In this case we are using standard HTML5 video that will make the video fit the width of a container (column). It's important to remove the height declaration so that the aspect ratio of the video is maintained as it grows and shrinks. This can easily be done by a stylesheet (css).
The simple css file should be structured as follows.

video {
  width: 100%  !important;
  height: auto   !important;
}

The stylesheet must also be added to the XPage.

<xp:styleSheet href="/videoresponsive.css"></xp:styleSheet>

The result is a responsive video.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
<xp:styleSheet href="/videoresponsive.css"></xp:styleSheet>
</xp:this.resources>
<script type="text/javascript" src="videojs/jquery.html5video.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:video1}" ).html5video({
    controls : true,  
    autoplay : false
    });
    }
  );
  ]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>html5video() <small> jQuery Plugin for Controlling and Customizing HTML5 Video/Audio</small></h1>
</div>
<div class="col-md-6">
<h3>Circle II Circle Almelo 2014</h3>
<video width="570" id="video1">
<source src="video/Circle II Circle Almelo Naxtstage 2014.mp4"
type="video/mp4">
</source>
Your browser does not support the video tag.
</video>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

More info about the jQuery plugin can be found on this website : html5video()

2 comments:

  1. Great post!!! Thanks for sharing.

    I've never used this project before. I've played with projekktor.com and really liked that. That can handle YouTube videos I believe.

    Do you know if this can do playlists? So 1 video plays and then another follows?

    Thanks!

    ReplyDelete
    Replies
    1. Thanks David. As far as I know there is no option for a playlist. But I will look into this just to be sure :) I will let you know if I find something.

      Delete