This guide deals with how you can insert a video into your web pages using HTML, or to be specific, using the facilities provided by HTML5.
Before we delve into the HTML, you should be aware that there are other ways you can add a video to your site.
Instead of hosting the video file directly on your website, you can also upload it to a video sharing site like YouTube, get the embed code (the HTML code) for that video, and insert it into your web page. If this is what you actually want, I have numerous tutorials on doing it using various web editors, including Expression Web, BlueGriffon, Dreamweaver and others.
The advantage of doing things this way is that you don't have to foot the bill for the bandwidth for that video. Since videos consume a lot of your website's data traffic allotment, it is a significant factor in its favour ("favor" if you use a different variant of English).
The disadvantage is that the video is now hosted on another platform that is mostly outside your control. Depending on which sharing site you use, they may put advertisements on the video, impose limitations on it (eg, on its length or file size), and so on. And of course, the video is also then available on another site, rather than being only on yours. Whether these disadvantages are significant depends on your video and your purpose for it.
Another alternative to writing your own HTML is to use one of the many free video player scripts available on the Internet.
The advantage of using these third party scripts is that some of them can play a video using Flash should your visitor use an old browser that does not have the built-in HTML5 video-playing capability. This includes Internet Explorer 8 and earlier. That said, I don't think there are many people still using such old browsers, but you will have to check your own site statistics to be sure, since your demographics may be different from mine. And remember that Adobe will stop issuing new versions of Flash by the end of 2020, so the benefit may not be as great as you think.
The disadvantage is that most of these scripts are actually JavaScript-driven. This means that if your visitor has disabled JavaScript in his/her browser, the video may not play at all. That said, these days, this kind of situation (where your visitor has disabled JavaScript) is probably rare, since so much of the web these days depend on it.
If the above alternatives do not suit your needs, read on.
Note that this tutorial deals with the HTML5 code for inserting a video. This means
that your page has to be in HTML5. If it is in some other version, like XHTML 1.0 or HTML 4.01, change the
DOCTYPE or DTD
to "<!DOCTYPE HTML>" and adjust the code on the rest of the page, if necessary, to conform to
the HTML5 specifications. One easy way to speed up the process of locating the HTML that needs to be modified is to
validate the HTML. That is,
run your page through one of free
HTML validators around. It will choke on the HTML features that are no longer supported, and point them out to you.
This saves time since you don't have to go through the page line-by-line.
And, as you have probably already surmised from the paragraph above, I will also assume that you know some HTML, or at the very least, know how to insert such code into your web page without messing up the rest of the page. If this poses a problem, you may prefer to use one of the alternative methods mentioned earlier.
The code for inserting a video is:
The video file in the example above is "demo.webm" located in the same directory as the web page loading it.
This particular video is in the WebM format. (I will discuss video formats in greater detail later in this article.)
The optional poster attribute is used to display an initial image on the video player screen. The
width attribute, also optional, specifies the width of the video player in pixels. There is also a
height attribute for those who want to include that too. The controls attribute
inserts buttons onto the player, allowing your visitor to pause, resume playback, change the volume, etc. The exact controls
it inserts into the player varies from browser to browser. Like width, poster and height,
it is optional.
Other possibly useful attributes include the following:
loop: causes the browser to seek back to the beginning of the video when the it reaches the end.
muted: mute the video by default.
autoplay: start playing the video immediately without waiting for your visitor to initiate it.
Note that this is potentially irritating to your visitors, unless the only reason people are at your
page is to view the video there.
preload: this attribute hints to the browser (that is, the latter is not required to follow it)
how much of the video it is to load in advance, prior to user-interaction. Allowed values include none
(don't preload anything), metadata (preload meta data only), and auto (the browser is free
to do as it pleases, even preloading the entire video). The default value varies from browser to browser.
You can also insert content between the opening <video> and closing </video> tags.
It will only be displayed in older browsers, that is, those that do not support the <video> tag. For example,
the following issues an error message in such browsers.
You can, of course, write whatever you want. You can even insert a script to load your video using Flash or Silverlight in that space, if you are so inclined.
Note that the following demo has no audio track, so there's no need to check your speakers. (I was trying to keep the file size as small as possible.)
The above demo uses the code below.
As you can see, it provides two alternative video formats, MP4 and WebM. As such, the URLs pointing to the video
files are now written separately in their own <source> tags instead of being specified in the
src attribute of <video>. The <source> tag
allows you to specify different alternative formats so that web browsers that don't support one format can choose another.
The MP4 format, containing video encoded in H.264, is supported out-of-the-box by Internet Explorer 9 and above, and current versions (and probably many of the older ones too) of Microsoft Edge, Chrome, Firefox, Opera and Safari. If you don't mind using something that is patent-encumbered, this is probably the most cross-compatible video format at the moment.
The WebM format, containing video encoded using VP8, is supported out-of-the-box by Firefox, Chrome (and presumably the other Chromium-derived browsers like Edge) and later versions of Android. As you may already know, this format is licensed to everyone for free, and so it is generally preferred if you can be sure everyone uses a supported browser.
There is also the older Ogg format, which unfortunately has very poor browser support. If you want to use this
format, the type attribute on <source> is "video/ogg".
Note that Ogg is supposed to be inferior to WebM in terms of its compression to quality ratio, so if your intention is
to only use freely-licensed formats, you should probably go with WebM instead.
Copyright © 2018-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a Video to Your Website in HTML (HTML5)
