HTML 5 Video Thumbnail

Fully Customisable & Accessible HTML5 Video Player

In modern browsers, with HTML5 Video Tag it is very easy and simple to include video in page. Unlike earlier we had to include Flash object and to support that we need to add Flash Player Plugin in browsers. Flash player was never bundled with Browsers so when we include flash object in our page we need to ask readers to install plugin first to see the video.

HTML5 Video

Video tag from HTML5 allows us to add Video on a page with all the player controls within the tag. With just couple of lines of code and we have video playing on our page.

<video controls>
	<source src="../siteware/videos/BigBuckBunny.mp4" type="video/mp4">
	<source src="../siteware/videos/BigBuckBunny.ogg" type="video/ogg">
	Your browser doesn't support HTML5 video tag.
</video>

The code above will display a video on a page with all controls like – Play, Pause, Volume, Mute & Fullscreen.

Attributes

autoplay* Tells the browser to immediately start downloading the video and play it as soon as it can. Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback.
preload Hint to the browser about whether optimistic downloading of the video itself or its metadata is considered worthwhile. Options are:

  • none – Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.
  • metadata – Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.
  • auto – Hints to the browser that optimistically downloading the entire video is considered desirable.
poster Provides an image to show before the video loads
controls* Shows the default video controls (play, pause, etc)
height & width Sets the width and height of the video in CSS pixels
loop* Tells the browser to automatically loop the video
muted* Mutes the audio from the video

*indicates a binary attribute, which enables that behavior when the attribute is present, or has it’s value set to anything.

Supported Browsers

HTML5 Video Supported Browsers
HTML5 Video Supported Browsers – caniuse.com

Accessibility

The default HTML5 video doesn’t have accessibility, it is not accessible for the keyboard only users or visibly disabled users. To make site/page with AA+ rating we need to make Video accessible to all the readers. For this we have to add extra video controls and cannot use the default controls ships with the video tag.

View Demo

HTML Code

<div class="video-wrapper">
	<video class="video-player">
		<source src="../siteware/videos/BigBuckBunny.mp4" type="video/mp4">
		<source src="../siteware/videos/BigBuckBunny.ogg" type="video/ogg">
		Your browser doesn't support HTML5 video tag.
	</video>
	<div class="video-controls--wrapper">
		<div class="progressbar">
			<p class="progressbar-time--elapsed">0:00</p>
			<p class="progressbar-time--duration">0:00</p>
			<progress class="progressbar-progress" min="0" max="100" value="0">0% played</progress>
		</div>
		<button class="btn-play-pause"><span>Play</span></button>
		<button class="btn-stop"><span>Stop</span></button>
		<button class="btn-volume"><span>Mute</span></button>
	</div>
</div>

The HTML code above shows fully accessible video. To enable the buttons to work with the video tag we have to handle all the functionality with javascript. I have developed the video controls script which handles play, pause, stop & volume/ mute buttons. The script is purely developed in vanilla javascript and doesn’t have any jQuery dependency.

Javascript Code

All you need to do is to include a javascript file and a small snippet in the main script file. You can download the Download Video Controls Javascript file file and include in your project.

//Javascript file to include at the bottom page of your page before </body> tag
<script src="video-controls.js"></script>

//Small snippet to include in your main .js file
AP.videoControls.init(".video-wrapper");

Continue reading second article which includes Closed caption & Full-Screen functionality.

Summary

Adding a Video on page is now very and easy and with the accessible controls with the video makes it usable for all types of users and it will also increase user experience as well. As always do let me know your reviews/ suggestions in the comment box below.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

4 comments On Fully Customisable & Accessible HTML5 Video Player

Leave a reply:

Your email address will not be published.