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.
How to embed video using video sharing platforms and 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.
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.
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.
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.
Listed below are some of the advantages and disadvantages when using the HTML5 video tag within your website.
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.