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.
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.
|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:
|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.
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.
<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>
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.