Friday, March 29, 2024

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
Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured