How To Embed Videos in HTML5

When the <video> tag was first unveiled, a wave of excitement swept through the web developer community. Prior to the <video> tag, offering videos on a web page meant using a plugin like Flash, QuickTime, or RealPlayer. There was no standards-compliant way to embed videos in a webpage.

The <video> tag eliminated all those worries. It offered developers an opportunity to embed videos directly to their web pages. However, the <video> tag also brought developers face to face with the issue codecs ‐ a challenge from which plugins and third party services had previously shielded them.

As HTML5 becomes widespread, <video> tag will most likely become more common place. This article  will tell you how to use it to embed videos in HTML5, how to handle different video formats, and what do to about browsers which don’t understand the <video> tag.

The <video> Tag

The <video> tag was introduced to make it possible to embed videos directly into a web page. Prior to this tag, it was impossible to play videos directly in a web browser. You needed a plugin like Adobe Flash Player because browsers didn’t have the inherent capacity to do so. That is why older browsers like IE 7 can’t play videos without a little help from plugins. They are not built for it.With the <video> tag, browsers are supposed to have an inbuilt capability to play videos – thereby forever eliminating the need for video plugins.

At the simplest level, a basic implementation of the <video> tag looks like this:

<video src="my_video.mp4" width ="500" height="350" controls>
<strong> HTML5 video element not supported </strong>
</video> 

src ‐ the URL of the video file.

width ‐ the width of the video display in pixels

height ‐ the height of the video display in pixels

controls ‐ a simple control panel at the bottom of the video display. It typically contains a play/pause button, a volume control, a progress bar and a full-screen maximization button. If you don’t include the “controls” attribute, the video will be displayed without a control panel.

The text between <video> and  </video> tags: This is intended for browsers which don’t support the <video> tag. The text contained will be displayed. Later, we shall consider options of how to deal with such browsers.

That is a basic implementation of the video tag. In a browser which supports the <video> tag, it will display like this:

In a browser that doesn’t support the <video> tag, it will display this:

HTML5 video element not supported

Attributes of the <video> tag

The video tag implementation given above is sufficient for the most basic uses of the <video> tag.  In fact, you can copy it the way it is, change the src value to reference your video file, and you will have successfully embedded a video in HTML5. However, sometimes you need more control over their videos. The tag comes packed with many attributes for controlling different aspects and behavior of the video.

Among the common attributes are the following:

attribute description Value(s) Example
poster A picture which covers the video display
before it starts playing
URL of the image poster =
“images/loading.png”
autoplay As soon as the video finishes loading, it should begin playing autoplay autoplay
Or
autoplay=”autoplay”
loop As soon as the video fishes
playing, it should begin playing again.
The video should keep playing
unless the user stops it
loop loop
Or
loop = “loop”
preload Whether the video should be loaded immediately the web page loads.

These values mean the following:
auto means the video should load immediately the page loads. This is the default value
none means the video shouldn’t load. It  should only load when the user clicks play

metadata means the browser should load the video’s metadata (e.g format,
dimensions, size, length etc). However it shouldn’t load the video. It should only
load it when the user clicks “play”.

auto
none
metadata
preload
Or
preload=”auto”
muted The audio output of the video should be muted muted
Or
muted = “muted”

The tag also supports standard HTML attributes such as id, class, style, title, accesskey and lang. it also supports universal HTML5 attributes like draggable, hidden, dropzone and data.

The only thing which is a little weird are the attributes which seem to double as values (Example: muted=”muted”, loop = “loop” and autoplay=”autoplay”). Such attributes are specified in XHTML compatible way. For being HTML5 compatible, the single values (Example: muted, loop and autoplay) are sufficient.

Here is a <video> implementation we saw earlier. However, it’s been souped up with more attributes : poster, preload, autoplay, and loop )

<video src="my_video.mp4" width ="500" height="350"  
controls autoplay preload loop poster="images/preload-icon.png" >
<strong> HTML5 video element not supported </strong>
</video> 

The way some of the attributes are set up i.e. “controls autoplay preload loop” looks rather strange. It runs contrary to the standard HTML model of attribute="value". If you prefer the more familiar syntax, you can rewrite that section as controls="controls" autoplay="autoplay" preload="preload" loop="loop" . It will work just fine.

Video Formats

The main weakness of the <video> tag is that it has brought web developers into the complex world of video codecs. Now codecs are little encumbrances which are typically reserved for professional video editors. To the lay person, a codec is a video format (although in actual sense, it is something far more complex. If you are the curious type, you can read all about it, see this page).

Now, different browsers support different video formats. Early adopters were actually furious when they realized that unlike with Flash, the <video> tag requires more than one format for each single video.

But that is generally a challenge with most native browser implementations, each browser vendor does things their own way, and developers have to pick up the pieces. Any developer worth his or her salt will place browser incompatibilities into perspective. When it comes to video formats, it is actually kind of straightforward.

There are three video formats (or codecs if you like) which are supported by the major browsers on the market. These are:

  • MP4
  • WebM
  • Ogg

Now, if you want details on each of these formats, you can visit this link . For now, you need to know which browser supports which format. The specifics are given in the table below:

Browser MP4 WebM Ogg
Chrome Yes Yes Yes
Firefox Yes Yes Yes
Opera No Yes Yes
Safari Yes No No
Internet Explorer Yes No No

From the table, it is obvious that MP4 is the most widely supported format. The only browser which doesn’t support the MP4 format is Opera, and it supports the other two. Therefore, including MP4 with any of the other formats will make your video play on all browsers.

To embed each format, you use the <source> tag as follows:

<source src="my_video.mp4" type="video/mp4">

<source> – this is a tag which is typically used to specify multiple media resources for media elements.

src ‐ this is a URL of the video. It can be a static or relative URL; or a path to the video file

type=”video/mp4″ ‐ this is the MIME type of the video.

These are the mime types of the video formats mentioned above:

MP4   video/mp4
WebM  video/webm
Ogg Video/ogg

The MIME type is used by the browser to determine whether or not to load the video file from the server. Before attempting to load, a browser checks the Mime type. If it is incompatible, then it does not even bother loading it. If it is compatible, then it loads it, and skips all the other files which follow. Therefore you must make sure that you specify the correct MIME type.

Once you have everything in place, you simply insert each <source> tag between the opening and closing <video> tags. Here is an improved version of our implementation, with coverage made for different video formats.

<video width ="500" height="350" 
controls autoplay preload loop poster="images/preload-icon.png">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm"> 
<strong> HTML5 video element not supported </strong>
</video>

So, that’s how to handle the different formatting issues. It is quite straightforward really. The only challenge might be getting your videos into different formats. There are several online services and desktop tools that does video conversions. You can use to convert to common video formats like AVI into MP4, Ogg or WebM. See:

The above implementation will make your videos to play on every browser which supports the video tag. This includes even mobile versions of most standard browsers. This will make your video available to close to 90% of web users. However, there is one problem. It doesn’t work with browsers which don’t support the <video> tag. You need to plan for those ones also.

A Fall Back Option For Older Browsers

Older browsers don’t understand the <video> tag. Although some like the IE 8 are quickly fading from the market, you can never know which browser version a visitor to your web page is using. The smartest option is to plan for them.

When it comes to videos, the best option is to embed a Flash video as a fallback position for older browsers. Basically, you use the <object> tag to insert a .,swf file right before the closing tag of the <video>.

Here is our implementation, with an allowance made for browsers which do not support the <video> tag.

<video width ="500" height="350" 
controls autoplay preload loop poster="images/preload-icon.png">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm">
<object width ="500" height="350"type="application/x-shockwave-flash" data="flash_file.swf">
<param name="movie" value="flash_file.swf">
</object>
</video>

 

The above implementation is perfect for effectively handling almost every browser on the planet. It covers different video formats, and provides a fallback position for legacy browsers. In many respects, it is sufficient.

However, those who prefer to cover every eventuality will ask a question like: what if the user doesn’t have Adobe Flash Player? Well, in this case, you have two options: you can advise them to download and install Flash Player, or you can give them the option of downloading the video.

To provide a download option, you can carry out two options. First, you provide an image file as the final fallback option for those without a Flash Player. You do this by adding an <img> before the final <video> closing tag. The purpose of the image is to actually alert the user that there is supposed to be a video in that position. Secondly, you provide a download link for the video.
With these two modifications in mind, our implementation will now look like this:

<video width ="500" height="350" 
controls autoplay preload loop poster="images/preload-icon.png">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm">
<object width ="500" height="350"type="application/x-shockwave-flash" data="flash_file.swf">
<param name="movie" value="flash_file.swf">
</object>
<img width="500" height="350" src="my_fallback_image.jpg" alt="embedded video"
title="cannot play video. Please download the video from the link below" >
</video>
<a href="my_video.mp4"> Download Video </a>

In a nutshell, this is how to embed videos in HTML5. As you may have noticed, it is not that difficult. In fact, you can copy the above implementation directly onto your web page, set the properties to your preference, and you will be good to go.

Video and Accessibility

One unfortunate aspect of web video is complete absence of accessibility support in the current implementations. Though web video is gaining popularity very fast, the Accessibility features are yet in its infancy.
The keyboard accessibility in video players are lagging. When the video controls are customized, there is no keyboard support at all.
Another aspect is the lack of captioning features. HTML5 tag does not contain any built-in mechanism for captioning, descriptions, transcripts, or other media alternatives.

Related Reading

Read More:

Leave a Reply 0 comments

Close

Copy and paste this code to display the image on your site

Copied!