Multiple HTML5 Video Players with JQuery Dialogs

This tutorial looks at how to combine the HTML5 video tag with JQuery dialogs for easy loading of multiple videos in a pop-out format. The code sample also features a black-out overlay to focus the users attention on the playing video.

Prerequisites

The code defined in the steps below relies on on an HTML5 document type so that the video tag can be used and that jquery and jquery-ui have been included on your page like so:

<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
...

HTML

    <div id="overlay" class="overlay"></div>



    <h2>Video 1 Demo</h2>
     <img id="video1" class="loadVideo" src="http://imageStillUrl" />
     <video id="video1player" controls class="videoPlayer">
          <source src="https://videoUrl/file.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
          <source src="https://videoUrl/file.webm" type='video/webm; codecs="vp8, vorbis"' />
          Video not supported.
     </video>



     <h2>Video 2 Demo</h2>
     <img id="video2" class="loadVideo" src="http://imageStillUrl" />
     <video id="video2player" controls class="videoPlayer">
          <source src="https://videoUrl/file.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
          <source src="https://videoUrl/file.webm" type='video/webm; codecs="vp8, vorbis"' />
          Video not supported.
     </video>

The first division is our black-out overlay that will fade in when a video is loaded. There are then two blocks of videos, each has what will be a clickable preview image and the HTML5 video tag. Note there are two formats that it is recommended that you use for maximum browser support - mp4 and webm.
All you would need to do to add more videos is copy in another block (with the img and video id's having an incremented number). As long as they use the loadVideo and videoPlayer classes they will be auto-registered by the JQuery.

JQuery

Now on to the tricky part.

$(document).ready(function() 
{ 
     modals.init();
});
 
var modals = 
{
     autoplay:true,
     init:function()
     {
          $(".videoPlayer").dialog({
                width: 576,
                height: 324,
                autoOpen: false,
                resizable: false,
                show: {
                     effect: 'fade', 
                     duration: 1000
                },
                hide: {
                     effect: "fade",
                     duration: 1000
                }
           });


          $(".videoPlayer").each(function()
           {
                $('.ui-widget-header').remove();
           });


          $( ".loadVideo" ).click(function() 
          {
                var videoPlayerId = $(this).attr('id') + 'player';
                $("#" + videoPlayerId).dialog("open");
                if(modals.autoplay == true)
                {
                     $('#' + videoPlayerId)[0].play();
                }
                $('#overlay').fadeIn();
           });


          $(document).mouseup(function (e)
           {
                if($('.videoPlayer').is(':visible'))
                {
                     var container = $(".videoPlayer");


                    if (!container.is(e.target) && container.has(e.target).length === 0)
                     {
                          container.dialog("close");
                          $('#overlay').fadeOut(1500);


                         $('video').each(function() 
                          {
                               $(this)[0].pause();
                          });
                     }
                }
           });
      }
}

That might look like a lot to take in so we'll break it down. The first thing to note is that the majority of the code has been placed inside a 'modal' namespace to separate the code, the 'init' function of this namespace is called on document ready at the beginning.

Register the video player dialogs

The first block of code in the init registers all elements with a class of 'videoPlayer' as a dialog, you can adjust the settings such as resizable if you wish. The opening and hiding effects are set to fade over a one second period.

Style the video player

The next block is simply for styling purposes by removing the .ui-widget-header class so that we end up with nice clean boxes when the video loads.

Register the preview click event

Next we register a click function against each 'loadVideo' class, this will pickup the id of the the image clicked and append 'player' to the end to make up the id name of the video dialog. Using this it can open the dialog and auto play if this is set to true in the namespace settings.

Register the mouseup close event

Lastly, we define a mouseup event to close the video if anywhere outside of the video container is clicked. If true, the video will be paused and faded out along with the overlay. Note that as it is paused it can be resumed from the same place if re-opened.

CSS

Finally we define a bit of styling, this is mostly orientated towards minimalising default ui headers and padding to give a clean loading window for the video. The overlay class is setup to black-out the whole screen behind the video (note it's given a high z-index to overlay any other page elements).

.ui-dialog .ui-dialog-content
{
      position: relative;
      border: 0;
      padding: 0;
      overflow:hidden;
}
.ui-widget-content
{
      padding:0;
      border:none;
}
.overlay 
{
      background:rgba(0,0,0,0.3);
      display:none;
      width:100%; 
      height:100%;
      position:fixed; 
      top:0; 
      left:0; 
      z-index:100;
}
.loadVideo
{
      width: 272px;
      height: 153px;
}

fulluptodate

Friday, 20 December 2013