Video players made easy with HTML5's video element

With HTML5's <video> element, we can build cool web applications like video players without having to use plugins like flash. By the way, YouTube used to use flash players earlier to display videos but now even YouTube is moving to HTML5. In this blog post, let's see how we get to it.

Minimum code and explanation

Here's the minimum amount of code you'll need to write if you need to build a video player.

<video width="500" height="450" controls>
  <source src="test.mp4" type="video/mp4">
  <source src="test.ogg" type="video/ogg">
  Whoops!! Get a better browser friend, this one can't play video!
</video>

First we define the video element and specify its width and height with the respective attributes. We also specify whether we want to use the default controls or not.

Next we provide the video file to the video element using the source element. The source element takes in a src attribute that specifies the URL of the video file. You can also specify the type of video file with the type attribute.

But, what do we do if the browser doesn't support video? Well, if the browser doesn't support HTML5 videos then it will simply display the text between the video opening and closing tags. Hence, we specify the text that we want to display when video isn't supported between the video tags.

Support

We'll be talking about 3 main video types MP4, WebM, Ogg. Currently, Chrome and Firefox are the only browsers to support all the three. (Firefox from version 21 running on Windows Vista+ and Android supports MP4 not the previous ones)

Internet Explorer and Safari support only MP4. Opera supports the other two.

Control

We can control our video element from JavaScript using various properties, methods. In this post we'll discuss the major ones and I'll provide references to the entire list.

• Methods: The following methods are used in JavaScript on video elements to control it.
• play()- Starts playing the video.
• pause()- Pauses the video.
• load()-  Reloads the video. We use this to change videos. First we change the src attribute and then we call the load() function for the changes to take place.
• canPlayType()- Tests if the browser can play the specified type of video.
• Properties: The following properties are used in JavaScript on video elements to control it.
• autoplay- Decides if the video plays automatically.
• buffered- Shows how much of the video has buffered.
• controls- Decides whether or not the controls are displayed by default.
• currentTime - Shows the current time of the video.
• duration- Returns the length of the video in seconds.
• ended- Tells if the video has ended or not.
• paused- Tells if the video is paused.
• played- Shows what parts of the video have been played.
• src- The source of the video.
• volume- The volume of the video.

There are many more methods and properties that we can use. I've only described the most important ones. In the next blog post, we'll be actually implementing a video player using what we talked about in this post.