BLOG

Using HTML5 to Embedding Videos on Your Webpage

In recent times, businesses have started employing video marketing strategies as a part of their Internet marketing mix. Companies use videos for marketing, promotions and even as know-how kind of content. Here is the best way to Embedding Videos into your website.

Over a period of time, all videos available on the Web have been played through third party browser plugins like Flash Player, RealPlayer, Windows Media Player, and QuickTime.

embedding videos

With the advent of HTML5, embedding videos in a website is really an easy task for developers. With this innovative HTML5 standard, you don’t need any special plugins to stream the video content on your webpage.

Browser support for HTML5

Browser support and video encoding are the two major issues that developers face with HTML5, while using it to embed videos. No single video format is suitable for all HTML5 browsers.

Studies reveal that about 90% of HTML5 video tag attributes are now supported across most of the browsers and devices. At present, Firefox 3.5, IE9, Chrome 3+, Opera 10.5, Safari 3 and Safari 4 support HTML5 video attributes.

On the other hand, HTML5 supports only 3 important video types: MP4, WebM, and Ogg/Ogv. The video formats that work on each browser vary. Mozilla Firefox, Google Chrome and Opera support WebM, Ogg. Safari and IE 9 are suitable for MP4 while IE 6-8 support only Flash.

Formats, Codecs and Technicalities

embedding videos

Videos that are played on the Web are not just .mp4 or .mov files. They are actually containers that hold more stuff inside.

Each of these containers holds at least one video and one audio track file that must be effectively compressed to support HTML5 browsers.

When it comes to embedding a video on the webpage, codecs vary for each browser. Free, open codecs without any patent and licensing restrictions are currently not available.

As every browser uses a different video format, you have only three possible options to encode your HTML5 video. These tools are basically video compression standards that are popular among developers in recent times.

  • Ogg: Ogg is an open standard container format that utilizes Vorbis encoding for audio and Theora encoding for video. This format is not patented and is royalty-free. Versions from and later than Firefox 3.5, Chrome 4, and Opera 10.5 support Ogg.
  • H.264 (MP4): H.264 is the most popular container format that is patented and remains royalty-free for nonprofit usage. This format goes well with IE 9, Safari 3.1 and Chrome, iPhone, IE9 and Android and utilizes H.264 for video encoding and AAC for audio encoding.
  • WebM: WebM is relatively a newer standard that has been recently acquired by Google and released as an open source software project.

    It is royalty-free but still patented and utilizes VP8 video encoding and Vorbis audio encoding. This format is supported by Firefox 4.0, Chrome 6.0 and Opera 10.6.

HTML5 offers the <video> syntax, using which you can embed video on a webpage. By making use of this tag, you can specify the dimensions of the video. This single tag provides many options for parameters.

Dealing with other browsers-Embedding Videos

old browser

(Source: Amazonaws)

According to StatCounter Global Stats, there are users still sticking to IE7, IE8 and other older versions of Safari and Firefox.

This is something that needs to be taken into consideration as well. The ideal solution to deal with other browsers is by making use of a Flash fallback player. For this, you need to use an <embed> tag or an <object> tag to reference any third party flash file. The two most popular free open source solutions that can be taken into account are JWplayer and flowplayer.

With these evolutionary features and properties of HTML5, by embedding videos on your website or blog is much easier than using Flash. Videos extend the time people stay on your website, which in turn helps them remember your brand’s message. In fact, you can sense great success when video is used for viral marketing.

It has been proven to increase customer retention and increase sales as well.People love to see commercials and a video of how your product will work and how to tutorials.

Good luck and let us know if we can help with anything.

Leave a Reply

Your email address will not be published. Required fields are marked *

  • business
  • blogger
  • lifehack
Unlimited Disk Space
Unlimited Bandwidth
Free Domain Name