What do you need to know about HTML5 video

Share this article

HTML5 keeps on stunning the Internet community with revolutionary web features. One of the key HTML5 enhancements is the advanced video support. With a new HTML5 standard, users don’t need any special plugins to stream video in web browsers both on PC or any portable device. Still in spite of the growing popularity of HTML5 standard, most web developers and designers are reluctant to migrate to the new markup language, maybe because of the absence of a complete HTML5 specification or lack of practical information on HTML5 сoding. In this post, I’d like to take a deeper look at HTML5 video element and explain its main points in plain English.

<video> tag vs. <object> tag

The <object> tag referrs to an embedded element within a web page: audio, video, Java applet, ActiveX, PDF, or Flash. The markup for this tag is fairly cryptic. Thus, if you wanted to embed a Flash video into a web page, you had to insert the following code:
<object id=0 type="application/x-shockwave-flash" data=player_flv_maxi.swf width=420 height=240
<param name="movie" value=player_flv_maxi.swf />
<param name="wmode" value="opaque" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="autoplay" value="false" />
<param name="autoload" value="false" />
<param name="FlashVars" value="flv=Wildlife.flv&width=420&height=240&autoplay=0&autoload=0&buffer=5&buffermessage=&playercolor=464646&loadingcolor=999898&buttoncolor=ffffff&buttonovercolor=dddcdc&slidercolor=ffffff&sliderovercolor=dddcdc&showvolume=1&showfullscreen=1&playeralpha=100&title=Wildlife.flv&margin=0&buffershowbg=0" />
To play this, users can’t do without a Flash player plugin which is ndispensable for all modern browsers except Google Chrome since the player is already pre-installed in the browser. HTML5 introduces the new <video> tag which replaces the former <object> tag for Flash video embedment. The benefits of using HTML5 <video> tag are numerous. It brings not only minimalism and simplicity of video code, but also the ease of search bots to properly index your video file. Website developers can add a video to a page in the same way they would add an image, since the basic markup necessary for </video><video> in HTML5 is refreshingly simple and straightforward:
</video><video width="320" height="240" controls autoplay poster="video.jpg">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 Your browser does not support the video tag.
</video>
Such code can be easily composed even by a not tech-savvy specialist. In the simplest way the code may be reduced to:<video src="movie.mp4" controls width="320" height="480"></video>

Video Attributes

As you can see, the <video> tag is used just like any other tags in HTML. Between opening and closing tags you can place various attributes to get the video player you want. Several of the attributes are boolean (e.g. controls, loop, muted) – no value is required. So by including or omitting them, you set the value “true” or “false” respectively. HTML5 specialists also recommend inserting the following line within video tag: Video not playing? <a href="pics/video.mp4">Download the file instead.

Controls

The browsers supporting HTML5 video have the video players already built-in. All of them include a standard set of controls: Play, Pause, Seek, Volume. However, each browser provides its own look for the video player: from the minimal approach of Chrome and IE to the more elaborate controls of Firefox, Opera and Safari. If you want to keep controls the same across all browsers, or integrate the player with our website design, you can create our own controls from scratch. Here are some useful resources:
  • VideoJS is an HTML5 video player built with Javascript and CSS;
  • Sublime Video is a sleek cloud-based HTML5 video player with advanced feature set, a paidware;
  • Projekktor is an open source HTML5 video player built with pure JavaScript; it also uses Flash when there is no native H.264 support;
  • Tutorial “How to build a custom HTML5 video player with jQuery and CSS3” from Opera developers.
  • Video source

    The <video> tag allows multiple <source> elements which can link to one and the same video in different formats, for example:
           <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
           <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
           <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
    As you see, the source tag has two attributes, src and type. The “type” attribute specifies the MIME type and possibly a list of codecs, which helps the browser to determine whether it can decode the file. By default, the browser will use the first recognized format. All modern browsers support at least one HTML5 video format.

    Browser Support

    For up to date information on browser support, you can check out the YouTube HTML5 Page

    Codecs

    There’s a long debate on which video formats/codecs to pursue and consensus hasn’t been reached yet. As a result, in the draft of HTML5 specification any references to a particular codec were removed. Instead, the following creteria to the video codec were put forward:
  • it should have good compression, good image quality, and low decode processor use;
  • be royalty-free;
  • feature hardware video decoder
  • Three codecs were suggested for HTML5 video element: H.264, OGG Theora, and WebM VP8. Here are their advantages and disadvantages.

    H.264

    Pros It gives good quality video and small file sizes. It outputs excellent video both for low-bandwidth, low-CPU mobile devices and high-bandwidth, high-CPU modern PCs and everything in between. It’s free for Internet end-users. Cons The underlying compression mechanisms in H.264 are patented and adopters have to pay royalties for commercial use to a licensing consortium called MPEG-LA.

    OGG Theora

    Pros It’s a royalty-free codec and is not encumbered by any known patents other than the original VP3 patents, which have been licensed royalty-free. Cons
    Theora generates high quality videos with comparatively larger file sizes. Plus it is a lot harder to find tools to convert to OGG Theora.

    WebM VP8

    Pros In 2010, Google acquired On2 – the company behind VP8, and published the video codec specification as open source, and all the patents as royalty-free. Cons While Google claims that WebM has the highest video quality of all the web codecs, most independent sources find that either H.264 is slightly better or there is very little difference between the two. The problem is that it can be very difficult to find tools to encode video to WebM. Until a complete consensus on video codecs issue is reached, web developers have to convert video to all these three formats. There’s some helpful software which deal with HTML5 video preparing:
  • Free Video Converter 3.0 by Freemake.com is a Windows software that encodes both desktop and online video to H.264, WebM and Theora OGG, the resulted videos go together with a sample of HTML5 video embedding;
  • alternatively, you can receive HTML5 source files as a result of video conversion with the help of the video tools listed here.
  • Some webmasters also combine HTML5 <video&ht; element with Flash-based code, so that a video could be played in any browser, including old IE versions. No doubt, HTML5 video still has a lot of benefits if compared to Flash. However, it’s still debatable whether H.264, WebM and Theora OGG will remain the default video formats supported in the video element. And since the specification of HTML5 video formats depends a lot on the decisions of Apple, Microsoft and Google corporations, the future of the whole new standard seems vague but still promising.

    Frequently Asked Questions (FAQs) about HTML5 Video

    What are the benefits of using HTML5 video over Flash?

    HTML5 video has several advantages over Flash. Firstly, HTML5 is an open standard, which means it’s free to use and doesn’t require any proprietary software to run. Secondly, HTML5 video is supported by all modern browsers, including those on mobile devices, which is not the case with Flash. HTML5 video also offers better performance and security than Flash. Lastly, HTML5 video is easier to integrate with other web technologies, making it more flexible and versatile.

    How can I make my HTML5 video responsive?

    To make your HTML5 video responsive, you can use CSS. By setting the width of the video to 100% and the height to auto, the video will automatically adjust to the size of its container. This ensures that the video will look good on all screen sizes, from desktops to mobile devices.

    Can I add subtitles or captions to my HTML5 video?

    Yes, you can add subtitles or captions to your HTML5 video using the track element. The track element allows you to specify a text file that contains the subtitles or captions. This file should be in WebVTT format, which is a simple text format that allows you to specify the timing and content of each subtitle or caption.

    How can I control the playback of my HTML5 video?

    HTML5 video provides several methods for controlling playback. You can use the play and pause methods to start and stop the video, the currentTime property to seek to a specific point in the video, and the volume and muted properties to control the volume. You can also add event listeners to respond to events such as the video starting, pausing, or ending.

    Can I play multiple HTML5 videos at the same time?

    Yes, you can play multiple HTML5 videos at the same time. Each video element is independent and has its own play, pause, and volume controls. However, keep in mind that playing multiple videos at the same time can be resource-intensive and may not work well on slower devices or networks.

    How can I customize the look of my HTML5 video player?

    You can customize the look of your HTML5 video player using CSS. You can style the video element itself, as well as the controls, if you choose to use the browser’s built-in controls. You can also create your own custom controls using HTML and JavaScript, which gives you complete control over the appearance and functionality of the player.

    Can I stream live video with HTML5?

    Yes, you can stream live video with HTML5 using the MediaSource Extensions (MSE) API. This API allows you to feed the video element with a stream of media data, which can be live or recorded. However, live streaming with HTML5 is more complex than simply playing a pre-recorded video and may require additional server-side software.

    How can I optimize my HTML5 video for better performance?

    There are several ways to optimize your HTML5 video for better performance. You can compress the video to reduce its file size, use the preload attribute to control how much of the video is loaded in advance, and use the MediaSource Extensions (MSE) API to stream the video in chunks instead of loading it all at once. You can also use adaptive bitrate streaming to adjust the quality of the video in real time based on the viewer’s network conditions.

    Can I protect my HTML5 video from being downloaded?

    While you can’t completely prevent your HTML5 video from being downloaded, you can make it more difficult by using the encrypted media extensions (EME) API. This API allows you to encrypt your video and require a decryption key to play it. However, keep in mind that this won’t stop someone who is determined to download your video, and it may make your video less accessible to some viewers.

    How can I make my HTML5 video accessible to people with disabilities?

    There are several ways to make your HTML5 video accessible to people with disabilities. You can add subtitles or captions for people who are deaf or hard of hearing, use the video’s title and alt attributes to provide a description of the video for people who are blind or visually impaired, and ensure that all controls are keyboard-accessible for people who can’t use a mouse. You can also provide an audio description of the video, which is a separate audio track that describes what’s happening visually.

    Elena VakhromovaElena Vakhromova
    View Author

    Elena Vakhromova is a freelance blogger and social media marketing specialist. Elena enjoys writing about popular Windows, Mac and web-based apps. Sometimes she helps promote software which she finds good. The recent contribution was for Free YouTube Converter.

    HTML5 Dev Center
    Share this article
    Read Next
    Get the freshest news and resources for developers, designers and digital creators in your inbox each week
    Loading form