Creating an Interactive Video Showcase with the Video API

This article was peer reviewed by Tom Greco and Marc Towler. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

With support for the native video element and its API being fairly comprehensive, now is a great time to look at ways in which you can leverage video to create something fancy and interactive for your users.

Throughout this article we will look into the basics of the API and after we get our bearings we will work on a practical example. This will be a multi-video slider in which videos are played one after the other, seamlessly loading and animating in content as they play.

Video API - a Brief Introduction

In essence when we talk about the Video API we are really talking about the Media API — a JavaScript API that allows you to interact with audio and video elements on a web page.

[author_more]

This API implements an interface called HTMLMediaElement which adds the properties, methods and events needed to support basic operations common to audio and video (such as loading media, changing the seek position, finishing playback etc). It is extended by both HTMLVideoElement and HTMLAudioElement which provide special properties and methods of their own.

We are mainly concerned with the video element so we will be focusing on interactions with this part of the API. To get a feel for the API you can visit the Interactive HTML5 Video Example page that showcases the most commonly used elements.

Browser Support

While Chrome, Firefox, Safari, Opera and Internet Explorer all support the video element, they differ in the formats they can play, each browser has a list of video formats it supports which may also be based on the version of the browser itself.

At the time of writing, all modern desktop and mobile browsers will play the mp4 format. In addition most browsers will have long support for either (or both) theogg or webm formats. Here is a comprehensive overview of the current state of support.

While you can get by with just supplying the mp4 version you should probably include both the ogg and webm formats as a comprehensive solution.

An Interactive Video Showcase

We will be creating a showcase feature using the video element. Our showcase will play a series of small video clips back to back and trigger animations at certain times. Using the video element like this we investigate some of its properties, methods and events and show the level of control you can achieve using this API.

As ever, you can find the code for this tutorial on our GitHub repo, as well as a demo of the finished showcase at the end of the article.

Structuring the HTML Layout

Our slider example will play each of the videos one after the other, fading in the related captions for each video as we play. If we don’t support video playback / are on a mobile device we will fallback to a static image will caption text.

Create outline wrapper for your slider and inside of it add each of the video sections you want to define

<!--Main video wrapper-->
<div class="video-wrapper" id="video-container">
  <!--first video-->
  <div class="video-container"></div>
  <!--second video-->
  <div class="video-container"></div>
  <!--Nth video-->
  ...
</div>

Markup for Each Video Section

For each of the videos we want to play, we will have to set up a few elements so that we can display the video, fade in the caption elements and track the video’s overall progress.

<!--Progress bar-->
<div class="progress-bar">
  <div class="progress">
    <div class="progress-inner">
      <span class="progress-time"></span>
      <span class="progress-value"></span>
    </div>
  </div>
</div>

<!--Progress bar overlay-->
<div class="progress-overlay"></div>

<!--Video Elements-->
<video preload="none">
  <source src="videos/video1/video1.mp4" type="video/mp4">
  <source src="videos/video1/video1.webm" type="video/webm">
  <source src="videos/video1/video1.ogg" type="video/ogg">
</video>

<!--Video overlay-->
<div class="overlay"></div>

<!--Caption Elements-->
<div class="caption">
  <h1 data-animation-percent="10">Amazing New Adventures</h1>
  <h3 data-animation-percent="20">Come visit new parts of the world</h3>
  <p data-animation-percent="40">
    Don't wait, there is a wide world out there that you can explore!
    Contact us to see what we can do
  </p>
  <div class="readmore" data-animation-percent="60">Find out more</div>
</div>

The video elements will contain the video tag with all of it’s source children set to different data types to maximize compatibility. Read more about adding support for multiple video formats.

The caption elements will contain all the markup you want to fade in as the video plays. You can add anything you want but it must have the data-animation-percent attribute with a value between 0 and 100. This will tell the slider on which percentage of video completion to fade the element in.

The progress bar displays the current video progress (in both seconds and percentage). This will be updated periodically. The bar will be interactive; When you hover over it, the video will pause and you will be able to seek through it, updating the video position.

Providing a Fallback for Mobile Browsers

To help cover all of our bases we will also set up a fallback element that will be used in case the current browser is a mobile device.

Add the following markup just before the end of main video wrapper

<!--Fallback-->
<div class="fallback-container">
  <div class="image"></div>
  <div class="overlay"></div>
  <div class="caption">
    <h1 data-animation-percent="15">This is a title</h1>
    <h3 data-animation-percent="25">Fallback when you dont support autoplay!</h3>
    <p data-animation-percent="50">Come and see a wide range of tasks and activities</p>
    <div class="readmore" data-animation-percent="70">Act now!</div>
  </div>
</div>

This will function in a similar way to our videos. When the user loads the page will we will trigger all of its caption elements to fade in depending on the value set in the data-animation-percent attribute. Instead of a video we are using a background image.

Detecting Mobile Browsers

Our slider will be using the autoplay attribute of the video element to automatically play the first video. However, most mobile browsers block this functionality (so as to limit data usage) meaning that the best policy is to detect if we are on a mobile device and display the fallback content accordingly. Normally we would do this using feature detection, however, detecting support for the autoplay attribute is tricky.

As ugly as browser / UA sniffing may be, it will give us a way to test the current browser against a known list of mobile devices and from there detect how we should proceed. We can do this using the following regular expression:

var mobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|IEMobile/i);

Which we can then use like so:

if(!mobile){
  //main video slider functionality
} else {
  //fallback functionality
}

Current and next Video Setup

Note: For the JavaScript functionality I’m using jQuery, so go grab yourselves a copy and include it at the bottom of the page.

Once we are happy we’re not on mobile we search for all of our elements with the video-container class and assign the collection to our videos variable. These elements will be the main wrappers for each video and its caption content. We then find each container’s video element and assign it to the local video variable.

Now that we have our current video, we need to find the next video element so that we can trigger it to start loading and play it when the current one has finished.

If we have another video-container element we assign that to the nextVideo variable. If we don’t have another video-container element we loop back to the first.

var videos = $('.video-container');

videos.each(function(index){
  var video = $(this).find('video'),
      nextVideo;

  if(index !== (videos.length - 1)){
    nextVideo = $(this).next('.video-container').find('video');
  } else {
    nextVideo = videos.first().find('video');
  }
});

You can add as many video-container elements as you want, and define additional videos and captions. The slider will find the next video and create a loop so that it continues indefinitely.

Continue reading %Creating an Interactive Video Showcase with the Video API%

by Simon Codrington via SitePoint