Embedding Video Directly in the Application using HTML5 Video tag

Video is now mainstream in HTML5. Forget plug-ins, forget supporting video players, and welcome to the world of native video through HTML5. Want to know why it’s such a big deal to have video as its own page element? Read on.

 

What’s so special about HTML5 <video> tag when we’ve been playing videos on web for ages? The reason is that the web is changing. The web you have seen 6-7 years ago is not the same you are seeing now and it won’t be same the next year. Technology is changing so fast. People have got access to different kinds of devices. They browse the same web from the desktop, mobile or even from e-book readers.

 

If you are aware of what the users are using, you would have developed much support for the content on the web accordingly like you could use Flash or Silverlight or any other technology till you know the limitation. The web portability is expanding like universe, in that case, how many technologies can you afford to give support for a single video on the page? I’m not trying to scare you! I just want you smell the situation.

 

There is a need for standardization of the format of the media content that is placed on the web pages. The media content placed on the web should play on different platforms & devices without any lag. HTML5 serves the purpose. The videos embedded using <video> tag can play on any device without the further need of plug-ins. In this article, I'm going to show you how to embed a video in the application directly with HTML5 technology.

 

Embedding a video

HTML5 isn’t just flexible, but also easier for developers to implement. You can place a video on your webpage by using a simple tag. Take a look at the following example of implementation:

 

<video width="320" height="240" autoplay="autoplay"
poster="examples/sanfran.jpg" source="examples/sanfran.m4v">
</video>

 

The above code will make the video appear like as shown in the following screenshot:

Let’s take a look at the attributes we’ve used in the code.

 

width and height

You can set the size of the video directly in the tag itself using these attributes. The width and height attributes overrides the size of the original video.

 

controls

Though this attribute is not used in the above piece of code, I felt the need to take about it. This attribute allows you show/hide the native controls of the vide like play and pause. The controls are shown by default. If you wish to hide them, you can use this attribute.

 

autoplay

This attribute sets your video to start playing as soon as the source is ready. It
defaults to ‘Off’ . I suggest you to not use this parameter on your website’s home page as it annoy your visitors.

 

poster

This attribute is used to show an image as a video thumbnail. If you don’t use this attribute in the <video> tag, the first frame of the video is shown as a video thumbnail once the frame is loaded.

 

source

This attribute is used to specify the source of the video you want to play on the webpage.

 

There are other attributes that can be used while using HTML5 <video> tag. Let’s take a look at them too:

 

autobuffer

This is like autoplay attribute we have discussed earlier about. This doesn’t start playing video when set to ‘On’, instead starts buffering the video when loaded on to the web page. By default this would be set to ‘Off’.

 

loop

This attributes works as it sounds. The video will be keep on playing when set to ‘On’. By default this is also set to ‘Off’.

 

download

If the video is playing on the device for some reason, you can allow user to download the video at least by using download attribute.

 

Hope you have learnt how to embed a video using HTML5 <video> tag. Comment below if you have any doubts regarding this!