LearnGetting Started with HTML5 Video


Matt West
writes on January 11, 2013

Until fairly recently web developers have been largely dependent on plugins like Adobe Flash or Microsoft Silverlight when adding video content to their web pages. Whilst these plugins meet the requirements of the task at hand, the approach of having to rely on a plugin for things like video is flawed.

Why can’t the browser just handle playing video? When YouTube was founded in 2005, native video playback just simply wasn’t an option but today there is a solution and it’s called HTML5 video.

In this blog post you are going to learn how to add native video to your web pages using technologies introduced in HTML5.

Video Formats

The first stop on our journey to the shangri-la of native video is to look at formats. There are three main video formats supported by browsers. These are WebM, MP4 and OGV. As you can see from the table below, there is no single video format that is supported by all the major browsers.

Chrome Firefox Opera Safari IE9+
WebM (VP8 Codec) Yes Yes Yes No Yes
MP4 (H.264 Codec) Yes No No Yes Yes
OGV (Ogg Theora Codec) Yes Yes Yes No No

If you want to ensure that your users will be able to play your videos you are best to use both the WebM and MP4 formats. You will learn how to specify multiple file formats later in this post.

Note: Firefogg is a really handy tool for converting your video files into various web formats.

Now that you are aware of the formats that your videos need to be provided in, lets move swiftly on to how you actually embed video.

The <video> Element

To embed native video in your web pages you need to use the new <video> element. Browsers that support HTML5 video will attempt to load the video from the path that you specify in the src attribute. Just as it would load a picture when you use the <img> element. You can specify height and width attributes to set the dimensions of the video. Note that unlike an <img> element the <video> element does require a closing tag.

<video src="my-video.webm" width="400" height="200"></video>

The example above shows a basic <video> element specifying a single video file. However, you have already learned earlier in this post that you need to supply multiple formats of your video in order to ensure playback support in all major browsers. To supply multiple versions of your video you need to use <source> elements. These should be placed inside your <video> element and should each contain a path to a version of your video file (using the src attribute) and a type attribute that specifies the format.

<source src="my-video.webm" type="video/webm">

When the web browser encounters a <video> element with multiple sources it will select the first file that it knows how to play, ignoring any others. You can also add fallback content to the bottom of your <video> elements. This content will be displayed if the user’s browser does not support HTML5 video.

Note: If a user’s browser does support HTML5 video but cannot play any of the files that you provide it will not display the fallback content.

In the example below I have used multiple <source> elements to provide different formats of the video. The fallback content used here is just a simple link to download the video. You could also add some code that will fallback to using a plugin like Flash for video playback.

Your browser doesn't support HTML5 video. Download the video instead.

Note: Remember to drop the src attribute from your <video> tag if you are using <source> elements.

Okay, so that covers the basics of adding video to your web pages. Pretty simple really. Now lets take a look at some of the attributes that you can use to control the behaviour of your video.

Video Attributes

In this section you are going to learn about a number of attributes that you can apply to your <video> elements to control built-in browser functionality.


The controls attribute is used to instruct the browser to display its default playback controls for the video (as seen in the figure below). By default the browser will not display any controls. It is worth noting that the design of these controls is not standardized and varies between browsers.

<video src="my-video.webm" width="400" height="200" controls></video>
The default video controls in Google Chrome

The default video controls in Google Chrome.


When the loop attribute is applied to your <video> element the browser will automatically restart the video when it finishes.

<video src="my-video.webm" width="400" height="200" loop></video>


The poster attribute is used to specify a path to an image that should be displayed in place of your video until the user clicks the play button. This could be a promotional image or a particularly fantastic frame from your video that will grab the attention of anyone browsing your web page. If you do not specify a poster image the browser may just display a black box filling the dimensions of the <video> element. Some browsers may use the first frame of the video however this behaviour is not always consistent.

<video src="my-video.webm" width="400" height="200" poster="featured-frame.png"></video>


The muted attribute is pretty self-explanatory. Using this attribute will instruct the browser to mute the video when the page loads.

<video src="my-video.webm" width="400" height="200" muted></video>


Applying the autoplay attribute will cause playback to start as soon as the web page finishes loading. Whilst this attribute does have a few legitimate uses it can also be used for evil! Setting a video to autoplay can be annoying to users as it interrupts their focus. Especially if the video includes audio. If you absolutely must use the autoplay attribute consider also applying the muted attribute to minimize the impact that this will have on the user experience.

<video src="my-video.webm" width="400" height="200" autoplay muted></video>

Note: There is an API available that allows you to control video playback using JavaScript. How to use this API falls outside the scope of this blog post but if you are interested check out this page on the Mozilla Developer Network.

Final Thoughts

HTML5 video promises to solve a lot of headaches for web developers that need to reliably embed video content into their web pages. Whilst this is all new in HTML5, browser adoption has been very good. All of the major browsers are supporting HTML5 video in some form. If you still have users on older versions of Internet Explorer it may be worth adding a Flash fallback but it’s certainly safe to go out and start using HTML5 video today.

Are you using HTML5 video in your projects? Let us know in the comments below.

Useful Links

7 Responses to “Getting Started with HTML5 Video”

  1. Hi, this site is so helpfull. Now I’m making a web page, and I’m trying to insert a video with some advances attributes, real, I’m trying to preview a teaser of the video trhought selecting some sequence of the video, but I don’t found the code to do this. Could you help me please? Thanks a lot for your attention. Regards

  2. スーパーコピーブランド弊社は安心と信頼のスーパーコピーブランド (N級品)専門店です!全国送料無料!日本一流品質のスーパーコピー時計、ブランド財布コピー、ブランドバッグコピー新作最新入荷!ロレックススーパーコピー,ウブロ スーパーコピー,ブランド時計 コピー,ブランド スーパーコピー,コピーブランド 通販,スーパーコピー 財布その他の世界一流ブランドコピーを取り扱っています。商品は全て最高な材料と優れた技術で造られて、正規と比べて、品質が無差別です!人気時計コピー、N級ブランドコピーのお求めはぜひ当店へ。弊社は正規品と同等品質のブランドコピー品を低価でお客様に提供します
    100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーエルバーキンコピースーパーコピー財布ブランド財布コピーブランドコピー激安バレンシアガ スーパーコピー激安ロレックス スーパーコピー時計ブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーブランド激安市場-jck35販売:ブランド財布コピー,激安ブランド,財布コピー,偽ブランド,偽 ブランド財布,偽物ブランド財布,ブランドコピー,ヴィトンコピー,ルイヴィトン財布偽物, シャネル財布コピー,グッチ財布コピー,エルメス財布偽物,D&G 財布コピー,ボッテガ 財布 .2013年新作スーパーコピーロレックス,スーパーコピーロレックス時計通販スーパー コピー品その他の世界一流ロレックススーパーコピー時計品を扱っています。 ホームページをクリックして商品をご覧下さい.ロレックスコピー,業界No.1人気スーパーコピーロレックス腕時計専門販売ロレックスコピー(ROLEXスーパーコピー)のロレックス レプリカ販売専門店です。すべての商品は品質2年無料保証です,ロレックス デイトジャスト 偽物,人気満点ロレックス コピーn級品新作大特集 http://www.bagkakaku.com/vuitton_belt.html

  3. BVLGARI(バッグ?財布?小物)CHLOE(バッグ?財布、小物)偽物ブランド,激安,コピー?ルイヴィトンバッグ,偽物?ルイヴィトン財布,コピーバッグ,ブランドバッグ,偽物バッグ,偽物シャネルバッグ,偽物エルメスバッグ,偽物グッチバッグ,偽物財布,コピー財布,時計の專門店
    スーパーコピー、スーパーコピーブランド(N級品)激安通販専門店世界一流ブランドコピー 財布、スーパーコピー 商品、激安ブランドコピー 。 ヴィトンコピー 、 ミョウミョウコピー 、シャネルコピー 、エル メスコピー 品格安通販。商品は全て最高な材料 と優れた技術で造られて、正規と比べて、品質が無差別です!人気ブランド.. http://www.bestevance.com/louisvuitton/index_6.html

  4. ┻┗┛┗┛%品質保証 満足保障。
    ロレックスコピー販売、代引きロレックス時計コピー通販、全て新品、高い品質、激安、送料無料。ロレックス時計コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは 業界で最高な品質に挑戦しますロレックコピー,ロレックコピー代引き,ロレック激安,ロレックス偽物 ,最高級ロレックコピーロレックス時計コピー,フェラーリコピー時計,パネライコピー時計,パテックフィリップコピー時計,ヴァシュロン.コンスタンタンコピー時計,エルメスコピー時計,カルティエコピー時計ルイヴィトンコピー、 ロレックスコピー、シャネルコピー、グッチコピー、エルメスコピー、 ボッテガヴェネタコピー、 バーバリーコピー、ミュウミュウコピー、トリーバーチコピー、バレンシアガコピー、ディオールコピー、ブルガリコピー、ブラダコピー、 ドルチェ&ガッバーナコピー、オメガコピー、フランク ミュラーコピー、gagaコピー。古驰拷贝, 靴/サンダル,サングラスコピー欧米O級品オーダー服各種のブランドの服、靴、、財布、腕時計の複製品をかばん一番ブランドliveブランドコピー服,ブランドバッグコピー,ブランド時計,ブランド靴シリーズ欧米O級品コーナーラッピング用品 http://www.brandiwc.com/brand-28-copy-0.html

  5. スーパーコピー時計販売はコピーガガミラノ通販専門店です . 0.106072179 レプリカガガミラノの私は(私がオンラインで見つける大丈夫、ランダマイザ)大きなふわふわサンタの帽子の中にすべてのaBlogtoWatchチームメンバーの名前を入れて、ランダムに彼らは匿名で2014年からガガミラノの時計を選ぶだろう誰のために相互に各チームメンバーをペアに名前を描いた私はその後、それぞれに通知彼らは「買い物」のためだった、と彼らに “贈り物”を選択し、彼らはその人のためにその時計を選んだ理由について書くための期限を与えた人物 . スーパーコピーガガミラノ時計豊富な品揃えで最新作も随時入荷致しております のでごゆっくりとご覧ください。☆ ガガミラノ時計税関の没収する商品は再度無料にして発送します☆ 送料無料 .
    スーパーコピー腕時計,ロレックスコピー,ブライトリングコピー,ボーム&メルシエコピー時計コピー業界最高峰スーパーコピー時計通販専門!7年以上の販売実績を 持つ時計コピー老舗!時計コピーであれば何でも揃えられます コピー時計 時計スーパーコピー通販専門店!時計コピー時計販売通販! コピー時計スーパー コピー等の 最高級のレプリカコピー時計を販売ロレックスコピー,ガガミラノコピー ,IWCコピー ,オメガコピー ,フェラーリコピー ,フランクミュラーコピー ,ベル&ロスコピー ,各種のブランドはコピーを表しますコピーを表して、時計をコピーして、スーパーコピーは代 金引換払いにして、スーパーはブランドをコピーして、スー パーは時計をコピーして代金引換払いにして、スーパーは時 計をコピーして、スーパーは腕時計をコピーして、ブランド はスーパーマーケットを表してコピーして、ブランドのスー パーマーケットはコピーして、ブランドはコピーを表して、 腕時計はコピーします http://www.gginza.com/wallet/louisvuitton/index.html

  6. Alagu Sundar on October 2, 2013 at 1:22 am said:

    Hai Matt West, I am read this article. I am trying this video tag. I am learning for many information. Thanks for sharing.

  7. Anand Mishra on April 17, 2013 at 9:03 am said:

    Hi Matt ,
    I am using camera api of html5 ,it is running well on opera and chrome but not able to run on other browsers.Please help me out of this issue.



Leave a Reply

You must be logged in to post a comment.

Learn to code with Treehouse

Start your 7 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more