MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to make HTML5 Video Player

The tutorial aims to cover the steps to create a HTML Video Player.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

As you know – HTML5 <video> element is already supported by most of browsers (by modern browsers). Its initialization is very easy. Each browser supports only few of video formats, and each browser has own native video controls (and all of them are different). But fortunately, html5 can give us all necessary possibilities to make own interface to control our video element.

The video player itself is pretty straightforward:

Listing1: Video Player Code

<video autobuffer controls height="180" poster="BBB_poster.jpg" width="320"> 
  <source src="bbb.mp4" type="video/mp4">   
  <source src="bbb.webm" type="video/ogg">
  <source src="bbb.theora.ogg" type="video/ogg">
  <img class='imagem_artigo' alt="Poster" height="180" src="BBB_poster.jpg" width="320">
</video>

The video element has the controls attribute set, which will be removed with JavaScript later. Note also the poster attribute, which displays a still image until the video is ready to be played, at which point it displays the first frame instead.

Next there are two source elements, which serve the video to Firefox, Opera and Chrome (ogg) and Safari (mp4). Finally there’s an img element, which displays if the browser doesn’t have video support.

We have added a bunch of form elements; two input image types for the play and volume icons, and two input text types for the duration and volume sliders. The latter two aren’t necessary, but are required for accessibility reasons.

The style

The style of the player doesn’t matter too much; but really the CSS isn’t too important here. The only thing to note is that we’ve added some rules here for screen overlays:

Listing2: Rules for Screen overlays

.overlay { background-repeat: no-repeat; height: 180px; position: absolute; width: 320px; }
.paused { background-color: rgba(0,0,0,0.2); background-image: url('pause.png'); background-position: left bottom; }
.play { background-image: url('play.png'); background-position: center center; }

Setting up

The first thing we’ve done is removed the native controls from the player for people who have JS enabled, so as not to provide two conflicting sets of controls:

video[0].controls = false;

Next we’ve defined some of the key variables which we’ll be using throughout the script. One of those variables, volumeSlide, is assigned to one of native widgets, i.e. a Slider which will be used to control the volume:

Listing3: Displaying the Volume Slider code

volumeSlide = new.widgets.Slider('#volume',{bindTo:'#vol_count', buttons:false, step:0.1, min:0, max:1, size:70, val:1});

The key options we’ve set are for it to appear in <div id=“volume”>, to have a minimum value of 0 and a max of 1, and to increment in steps of 0.1. This matches the volume setting for the video element.

Waiting for the metadata

For the next step we are going to create another slider, but this time for the duration/seek bar. In order to do this, however, we need to query the video’s metadata to know what the duration of the video is, and in Safari (which uses mp4 video) that doesn’t load before the rest of my JS has run.

To get around this we’ll poll the readyState attribute every half a second — with the setInterval function — until its value is at least 1, which means the metadata has loaded; once that’s done, we’ll load the slider:

Listing4: Displaying the duration/seek bar

t = window.setInterval(function() {
  if (video[0].readyState >= 1) {
    window.clearInterval(t);
    durationSlide = new.widgets.Slider('#vid_duration',{bindTo:'#duration_count', buttons:false, step:1, min:1, max:Math.round(video[0].duration-1), size:260, val:0});
    playVid();
  }
},500);

So you can see there that we’ve created the slider with a minimum value of 1 and a maximum of the duration of the video (in seconds), to increment in steps of 1. After that the setup is complete so we can begin the actual playback functions.

Playback controls

First an overlay is placed over the top of the video, which begins playback when clicked. Next, event listeners are added to the play button, the volume icon, and the volume and duration sliders.

The listener on the play button runs the function playControl, which determines the state of playback (ended, paused or playing) and either plays or pauses the video accordingly. It also updates the icon to reflect its action (if it is paused, the icon changes to a play icon, and vice versa), and adds the pause overlay onto the video screen when relevant:

Listing5: Playback Controls

function playControl() {
  if (video[0].paused === true) {
    video[0].play();
    /* Further functions here */
  };
} else if (video[0].ended === true) {
    video[0].play();
     /* Further functions here */
} else {
    video[0].pause();
     /* Further functions here */
}

There’s a function called startCount which uses setInterval to move the duration slider along by one second while the video is playing, and a function called pauseCount which uses clearInterval to pause.

The muteToggle function does what you expect, and mutes the video; it also changes the volume icon to show that state, and disables the volume slider while it is active.

A further function, volumeIcons, sets the state of the volume icon; there are four possible icon states, which are used depending on the value of the volume.

And the last function, secondsToTime, converts second values into hour/minute/second values, allowing for the timer to be updated. This is done every second by the startCount function, and also used for the function which is called from the event listener on the duration slider.

That event is probably worth looking at in detail:

Listing6: Events Function

events.addListener(durationSlide,'slideStop',function(event){
  video[0].currentTime = event.currentVal;
  var currentSecs = secondsToTime(event.currentVal);
  vidTimer.text(currentSecs.h + ':' + currentSecs.m + ':' + currentSecs.s);
});

Using the slideStop event we can check when the slider has been moved, and first set the video to begin playback from that point, then update the timer with the same values. The volume slider has a similar event set on it.

Output of example

Figure 1: Output of example

Conclusion

Follow the source code to know on how to build the video player in HTML5. Hope you like the tutorial.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login