Build an HTML5 Video Player

By Rob Gravelle

Build an HTML5 Video Player

Build an HTML5 Video Player

Prior to HTML5, video content could only be embedded into a web page using a plug-in such as flash. The HTML5 <video> element was a game changer that allowed the embedding of videos in a web page using native HTML markup. In today's article, we'll design a couple of players using nothing more than some standard HTML controls, CSS, and JavaScript.

Introducing the New <VIDEO> Element

The easiest way to embed a video in your web page is to include the HTML5 <video> element with the controls attribute. That adds video controls, like play, pause, and volume. It's also good idea to include width and height attributes. Otherwise, the page may flicker while the video loads. Within the <video> tags, multiple <source> elements can link to different video files. The browser will use the first recognized format. Text between the <video> tags may display a fallback message, because it will only display in browsers that do not support the <video> element:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

The autoplay attribute starts the video automatically once it has loaded.

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. MP4 is the only format supported by all the major browsers.

Controlling Playback via the HTMLVideoElement Interface

The HTMLMediaElement JavaScript interface exposes the properties and methods required to support basic media-related capabilities that are common to both audio and video. Hence, the HTMLVideoElement and HTMLAudioElement elements both inherit this interface.

An obvious question to ask is why do we need an API? One very good reason is that default video controls vary from browser to browser so building your own GUI is a way to make your player look consistent across all browsers. Beyond that you can do some cool things like change the video size at runtime.

<div style="text-align:center">
  <button onclick="playPause()">Play/Pause</button>
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

The above markup includes extra buttons to play and pause the video as well as change its size. Each button's onclick event invokes a JavaScript function that achieves the desired action via the HTMLVideoElement Interface. Note that in a real web page you would probably want to use non-obtrusive JavaScript to attach the event handlers. The onclick attribute is employed here for the sake of simplicity.

var myVideo = document.getElementById("video1");

function playPause() {
    if (myVideo.paused)
        myVideo.play();
    else
        myVideo.pause();
}

//the video always maintains its original aspect ratio
function makeBig() {
    myVideo.width = 560;
}

function makeSmall() {
    myVideo.width = 320;
}

function makeNormal() {
    myVideo.width = 420;
}

Want to try it out? It just happens to be the example provided by W3Schools.com.

Styling Player Controls

Binding button events to JavaScript functions is sufficient to build your own player, but it won't look very good. Take the following player:

<div id='player'>
  <video id='video-element'>
    <source src='http://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'>
    <source src='http://www.w3schools.com/html/mov_bbb.ogg' type='video/ogg'>
  </video>
  <div id='controls'>
    <progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
    <button id='btnReplay' class='replay' title='replay' onclick='replayVideo();'>Replay</button>  
    <button id='btnPlayPause' class='play' title='play' onclick='playPauseVideo();'>Play</button>
    <button id='btnStop' class='stop' title='stop' onclick='stopVideo();'>Stop</button>
    <button id='btnIncreaseVolume' class='volume-plus' title='increase volume' onclick='setVolume("up");'>Increase volume</button>
    <button id='btnDecreaseVolume' class='volume-minus' title='decrease volume' onclick='setVolume("down");'>Decrease volume</button>
    <button id='btnMute' class='mute' title='mute' onclick='muteVolume();'>Mute</button>   
  </div>
</div>   

Due to the large number of controls, they extend way past the video:

simple_video_demo_without_css.jpg

That's where CSS comes in. With some judicious use of CSS rules, you can make your player look as good or even better than the standard HTML5 video element:

body {
  font-family: Verdana, Geneva, sans-serif;
  background-color: lightgray;
}

h1 {
  font-size:16px;
  color:#333;
}

#player {
  float:left;
  padding:1em 1em .5em;
  background-color:black;
  border:2px solid darkgreen;
  border-radius: 9px;
}

#controls {
  border: 1px solid darkgreen;
  width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 5px;
  padding-bottom: 3px;
  border-radius: 7px;
}

video {
  border:1px solid darkgreen;
  width:420px;
  height:231px;
  background:black;
}

button {
  text-indent:-9999px;
  width:16px;
  height:16px;
  border:none;
  cursor:pointer;
  background:transparent url('buttons.png') no-repeat 0 0;
}

.pause { background-position:-19px 0; }
.stop { background-position:-38px 0; }
.volume-plus { background-position:-57px 0; }
.volume-minus { background-position:-76px 0; }
.mute { background-position:-95px 0; }
.unmute { background-position:-114px 0; }
.replay { background-position:-133px 0; }

progress {
  color: green;
  font-size: 12px;
  width: 220px;
  height: 16px;
  border: none;
  margin-right: 40px;
  background: #434343;
  border-radius: 9px;
}
progress::-moz-progress-bar {
  color:green;
  background:#434343;
}

progress[value]::-webkit-progress-bar {
  background-color: #434343;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-color: green;
}

Here's what the styled controls look like in a browser:

simple_video_demo.jpg

Conclusion

While we'll be getting to the JavaScript code that makes the above player work next time, here's the full working demo to tide you over.



Rob Gravelle

Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses.

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on Reverb Nation.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date