Please log in
 

Using HTML5

Generate appToken
Adding video

Since the release of HTML5, a major innovation has been the integration of the <video> tag. With this tag it is possible to embed videos on an HTML page without using a third party application such as Adobe Flash Player, Silverlight or Windows Media Player.

# 1 HTML5 and video format

One problem with the current HTML5 specification is that is does not define a standard video format to use in the <video> tag. Therefore browsers are free to use any video format they choose.

The ideal format must:

  • Have good compression, good image quality and a low encoding process.
  • Be open-source.

Ogg Theora was originally recommended as a standard video format for HTML5 but this provoked a heated debate between advocates of the codec (that was neither patented nor subject to licensing) and supporters of the H.264 codec (in this case Apple).

This has resulted in a situation where we must switch between the different codecs for each browser to use video in HTML5.

Internet Explorer 9.0 and Safari uses the H.264 format. Microsoft has also developed a specific plugin to integrate the WebM  format in its browser.

Mozilla Firefox is compatible with Ogg Theora.

Google Chrome supports the codec Ogg Theora and VP8 (WebM) but will stop support for H.264 for this year.

# 2 The major codecs

We see that there are three main codec used by Web browsers:

  • Ogg Theora: codec created by the Xiph.org foundation.
  • H.264: or MPEG-4 AVC is a video coding standard jointly developed by ITU-T and ISO / IEC. It combines the MPEG AAC audio codec with MPEG-2 part 7 which is an evolution of the MPEG-2 part 3 audio codec (the famous MP3).
  • VP8 (WebM): the last video codec from On2 Technologies (acquired by Google).

 

# 3 How to integrate the video tag?

To embed the <video> tag, the two methods are:

  • getHTML5Thumbnail: this method allows you to retrieve a thumbnail of the video
  • getHTML5Stream: this method allows you to retrieve a video stream compatible HTML5. Depending on options chosen with KIT cloud, the video stream will adapt to the browser.

Here is an example of integration into HTML5:


<video  id="kewego_HTML5_iLyROoafZdYT"
  poster="http://api.kewego.com/video/getHTML5Thumbnail/?playerKey=d9d4a6200a45&sig=iLyROoafZdYT"
  controls="true"  height="300" width="400" preload="none"  >
    <source  src="http://api.kewego.com/video/getHTML5Stream/?playerKey=d9d4a6200a45&sig=iLyROoafZdYT"
      type="video/mp4"  width="400" height="300"  />
</video>

Sample HTML5 Players

There are several HTML5 players including:

Generate appToken
Adding video