Atomic Smash homepage splash

Embedding video using the HTML5 video tag

Words by Colin GoodmanMay 4, 2017

So I think its fair to say embedding video into your website has come on quite some way, when thinking of the days when flash was a very popular choice. Today video sharing platforms like Youtube and Vimeo are great options to use and more recently the introduction of the video tag within HTML5.

 

In part 1 of this series I will show you how to implement video using the HTML5 video tag, while stating some pros and cons of using this method.

Embedding video into your website

How to embed video using video sharing platforms and the HTML5 video tag.

1

Embedding video using the HTML5 video tag

Read how to embed video into your website while understanding some of the advantage and disadvantages of the methods mentioned in this post.

2

Embedding video using video sharing platforms

Read on how to embed video into your website by using video sharing platforms like Youtube and Vimeo.

HTML5 video tag

So with the introduction of HTML5 in late 2014, we were given the video tag to improve how we embed video into web pages. The video tag is very flexible in the sense that attributes can be added to it very easily, to add functionality to your video.

<video width="320" height="240">
  <source src="http://mywebsite.com/mycoolvideo.mp4" type="video/mp4">
  <source src="http://mywebsite.com/mycoolvideo.ogg" type="video/ogg">
</video>

Above is a code example on how to implement the video tag within your HTML web page. By reviewing the code you can see that you’re required to point to the source (URL) of the video you want to embed and your done. By using this code, you would have successfully embedded the awesome video into your web page.

A possible downside of using the video tag is that to make the video playback in the considered more popular browsers, you have to convert your video into other formats. Again, referring to the above code, there are two source tags that point to the same video but in different formats, this ensures that if a browser does not support one of the formats it will try the other format(s) stated in your HTML. Currently having your video in formats of MP4 and Ogg, cover the most used browsers which are Chrome, Firefox, Internet Explorer, Safari and Opera.

HTML5 video attributes

I previously mentioned that you can add attributes to improve the functionality of your video, listed below are the attributes that can be used currently.

  • autoplay
  • controls
  • height
  • loop
  • muted
  • poster
  • preload
  • src
  • width

To use these attributes all you need to do is state them as inline attributes in your video tag, example below.

<video width="320" height="240" autoplay loop muted>
  <source src="http://mywebsite.com/mycoolvideo.mp4" type="video/mp4">
  <source src="http://mywebsite.com/mycoolvideo.ogg" type="video/ogg">
</video>

The attributes used in the above code will make the video autoplay on load and loop continuously while the audio of the video will be muted. Pretty cool and really easy to use.

I’m sure over time more attributes will be added to the video tag allowing more flexibility on what you can do with your video and improving the user experience when interacting with the video.

What are the pros and cons

Listed below are some of the advantages and disadvantages when using the HTML5 video tag within your website.

Why use the video tag

  • easy to implement
  • cross browser compatible (IE9+)
  • use of attributes to improve the functionality of the video

Why not to use the video tag

  • if hosting the video locally then this will reduce page load time when loading the page its on.
  • converting the video into the necessary formats for browser compatibility could be considered time consuming.

So there you have it. Hopefully you now know how to use the HTML5 video tag and understand some of the advantages it can bring as well as the disadvantages.

If you have experienced any other pros or cons of using the video tag please feel free to share and leave a comment.

In part 2 of this series I will talk about how to embed video using video sharing platforms and what they bring to the table when embedding video into your website.

Profile picture of Colin Goodman

Colin Goodman

Colin works very closely with David and Jenny on the front end development aspects within projects. He has an exceptional eye for detail and is constantly looking at new ways to code websites with the latest technologies available.

Go back to top

Keep up to date with Atomic news