Pin Me

HTML5: The Way to Embed Videos in Web Pages without Plug Ins

written by: N Nayab•edited by: Christian Cawley•updated: 8/23/2011

Until recently there was no standard for displaying video on a web page, and websites relied on different plug-ins such as Flash to display videos. HTML5 video standards have however changed that by incorporating the

  • slide 1 of 5

    The common way to display videos on the web until now was by embedding the video content using any third-party plug-ins such as Abode Flash Player, RealPlayer, QuickTime or any other. Google Chrome integrated the flash player to Chrome website, thereby doing away with the need to install a separate plug-in to view videos. The drawback of this method was the inability to view the video on a computer or browser where the required plug-in for the video format is not available. HTML5 overcomes this drawback and the new <video> element aims to become the new standard to embed video in a web page.

  • slide 2 of 5

    Command

    HTML5 Video Standards In HTML5, the command to insert a video is simple and straightforward. For example, to display the video file movies.ogg, use the following code:

    <video src="movie.ogg" width="320" height="240" controls="controls">

    </video>

    src is the attribute to specify the URL or path of the video.

    The width, height and control attributes are optional.

    The control attribute displays the play, pause and volume controls, if available in the video.

    The width and height commands set the width and height of the video display, and provide a definite format for the video. Failure to include them may result in the video display going awry.

    In addition, the Video element allows the following optional attributes

    • Audio. At present, only “muted" is allowed
    • Autoplay: to start playing as soon as the video loads
    • Loop: to start the video automatically from the beginning every time it plays out
    • Poster: to specify the URL of an image that represents the video
    • Preload: to load the video when the page loads, so that it is ready to run when required. The autoplay attribute overrule this attribute

  • slide 3 of 5

    Formats

    The video element supports three video formats: OGG, MPEG4 and WebM. However, the biggest issue is browser support. Only Chrome supports all these formats.

    • .ogv, or OGG files, an open source file format with Theora video codec and Vorbis audio codec is by far the most popular format, supported by Firefox 3.5 and above, Opera 10.5 and above, and chrome 5.0 and above. Wikimedia foundation and DailyMotion promote the OGG format.
    • WebM or files with VP8 video codec and Vorbis audio codec find support in Firefox 4.0, Opera 10.6 and above, and Chrome 6.0. Internet Explorer and Safari does not support OGG or WebM formats.
    • .mp4 or .m4v MPEG4 files with H.264 video codec and AAC audio codec finds support in Microsoft IE 9.0 and above, Chrome 5.0 and above, and Safari 3.0 and above, but not in Firefox or Opera. This format is a modified version of the old .mov extension, denoting Apple’s QuickTime. iTunes use this format. The latest versions of flash use MPEG4, but versions older to Flash 9.0.60.184 uses .flv extension which <Video> does not support.

    Use the following sample code to incorporate a single video in all these formats, so that the video runs on any browser.

    HTML5 Video Standards <video width="320" height="240" controls="controls">

    <source src="movie.ogg" type="video/ogg" />

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

    <source src="movie.webm" type="video/webm" />

    Your browser does not support the video tag.

    </video>

  • slide 4 of 5

    Codecs

    The codec is a coder-decorder, or an algorithm to decode the video stream and display images on the screen. While there are thousands of video codec standards available, the popular ones are H.264, Theora, and VP8.

    H.264, also known as “MPEG-4 part 10," “MPEG-4 AVC," or “MPEG-4 Advanced Video Coding.," as the name suggests was developed by the MPEG group and is compatible with all type of devices ranging from cell phones to desktop computers. Apple’s iPhone, Abode Flash, and YouTube all use this code. The main drawback of this standard however is patent licensing requirements that restrict free redistribution, making the format a non-starter for Mozilla and other open source browser vendors.

    VP8 is a royalty free modern codec adopted by Google, and produces output on par with H264. However, Theora, another royalty-free codec that evolved from the VP3 codec is more popular and adopted by the OGG format. This codec is however limited in its effectiveness for large-scale video streaming, is bandwidth intensive, and experts fear that further development of this codec will raise patent issues.

  • slide 5 of 5

    Challenges

    The HTML5 is far from being a done deal. The major challenge that prevents universal acceptance of HTML5 video standards is the lack of agreement on a standard video formats.

    The HTML5 working group splits in support towards OGG, Theora or H.264. Apple and Google favor H.264 while Mozilla and Opera favor OGG and Theora. The issue has reached a stalemate, with no side willing for a compromise that would allow a standard version. The lack of uniform codec makes it impossible for content creators to publish their videos in a single format viewable across all browsers, and undermines the advantages of having the Video element.

References

  • Image Credit of HTML5: freedigitalphotos.net/Idea Go : Terms of Use
  • Decoding the HTML 5 video codec debate. http://arstechnica.com/open-source/news/2009/07/decoding-the-html-5-video-codec-debate.ars. retrieved August 18, 2011.
  • Image Credit of HTML: freedigitalphotos.net/Idea Go : Terms of Use

     

  • HTML 5 Video. http://www.w3schools.com/html5/html5_video.asp. retrieved August 18, 2011.
  • Video on the Web. http://diveintohtml5.org/video.html. Retrieved August 18, 2011.