HTML5 Video - Handling video in HTML5

By: Emiley J Emailed: 1599 times Printed: 2046 times    

Latest comments
By: rohit kumar - how this program is work
By: Kirti - Hi..thx for the hadoop in
By: Spijker - I have altered the code a
By: ali mohammed - why we use the java in ne
By: ali mohammed - why we use the java in ne
By: mizhelle - when I exported the data
By: raul - no output as well, i'm ge
By: Rajesh - thanx very much...
By: Suindu De - Suppose we are executing

The concept of storing a video and playing it on a webpage is really complicated. You may need to know a little bit of a background of playing videos on the web in order to appreciate what HTML5 does for playing video on a webpage.

Video files are of many types. You would have heard of AVI files and MPEG4 files which are really a container to store video files. I say container because they are equivalent to a zip file which consists of many files of different types. A video file also contains the actual video, the audio and some meta data about the video and saves it in a single file.

So just as you have many different zip file extractors, you also have many video players. Just as there are many type of video files, there are many type of video players and they may not understand all the different types of video files. That is why some of the video files are not playable from some video players.

So if you think of a video player’s job, it does three things:

  1. Understand the type of video file container and read its contents
  2. Decode the video and play the video stream
  3. Decode the audio and play the audio

To do steps 2 and 3 above, the player must understand the different codecs that the video/audio was encoded in and then use the same decoder to decode before playing. This is the reason why there is NO Single video player that can play all types of video files. In fact, what YouTube does is when you upload any video file, it converts the video and stores it in a format that the youtube understands which is a flash movie type.

So prior to HTML5 there was no common accepted method to represent and play video on a webpage without the need for a plugin such as silverlight or flash etc, due to the above complexities. So HTML5 introduces a new tag called <video> tag which lets you list all the different formats of the same video within the <video> tag and lets the browser decide which format to use and play the video.

The below code illustrates this.

<video width="560" height="340" controls>
<source src="bday.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="bday.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

So with HTML5 you can make sure your video is playable in all browsers and devices, here’s what your video workflow will look like:

  1. Make one version that uses WebM (VP8 + Vorbis).
  2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
  3. Make another version that uses Theora video and Vorbis audio in an Ogg container. *
  4. Link to all three video files from a single <video> element, and fall back to a Flash-based video player.


HTML5 Home | All HTML5 Tutorials | Latest HTML5 Tutorials

Sponsored Links

If this tutorial doesn't answer your question, or you have a specific question, just ask an expert here. Post your question to get a direct answer.



Bookmark and Share

Comments(0)


Be the first one to add a comment

Your name (required):


Your email(required, will not be shown to the public):


Your sites URL (optional):


Your comments:



More Tutorials by Emiley J
Password must include both numeric and alphabetic characters - Magento
What is Hadoop?
Returning multiple values from a web service
Tomcat and httpd configured in port 8080 and 80
Java Webservices using Netbeans and Tomcat
Java WebService connected to Database
How to Deploy a Java Web Service
Call a webservice in Java
Java WebService - Create your first web service in Java
package javax.jws does not exist
Getting Started with Android
HTML5 Location - getCurrentPosition() in HTML5
HTML5 Canvas - Using Canvas in HTML5
HTML5 - Introduction
HTML5 Video - Handling video in HTML5

More Tutorials in HTML5
HTML5 Video - Handling video in HTML5
HTML5 - Introduction
HTML5 Canvas - Using Canvas in HTML5
HTML5 Location - getCurrentPosition() in HTML5

More Latest News
Most Viewed Articles (in HTML5 )
HTML5 Video - Handling video in HTML5
HTML5 Canvas - Using Canvas in HTML5
HTML5 Location - getCurrentPosition() in HTML5
HTML5 - Introduction
Most Emailed Articles (in HTML5)
HTML5 - Introduction
HTML5 Video - Handling video in HTML5
HTML5 Canvas - Using Canvas in HTML5
HTML5 Location - getCurrentPosition() in HTML5