Before showing you how to add videos to your Web site, let me explain a bit of the theory...
In the computer world, all types of files (be it videos, images, musics or even texts) have a their own formats; just like the variohs languages we have in the World. For videos, hundreds of formats for different use cases exist; and there are also many multimedia player softwares around there that can play some of these. In a Web page, the program that plays the video will be ... well, the Web site.
Unfortunately, the organization working on standards for the Web (W3C) only took interest in the video subject too late, as a reason meanwhile many techniques have emerged for including videos on Web pages. Let me present the two major techniques:
The first method is to use Adobe Flash. Flash is a small program that can run in your Web browser and can display multimedia content. It appeared in 1996 (by a company called Macromedia, which Adobe acquired later on), introduced support for videos in 2002 and when YouTube was launched in 2005 all of it was actually based on Flash technology. Adobe stopped supporting the Flash player end of 2020, nevertheless some older systems as well as some enterprise (yes, enterprise!) environments might still have it, combined with old Web browsers.
The second method is the use of the <video> tag introduced in HTML 5. This method, becoming more and more popular since November 2010 due to the fact that Apple's iOS devices do not support Flash, has one major disadvantage: though the tag is standard, no one agreed on the codec (i.e., video format) and unfortunately the "efficient" codecs (the ones which, in particular on mobile devices, consume much less battery for example) are bound to licensing, while the open codecs happen not to have hardware support on mobile devices in particular. In other words, if you need to have 100% coverage with this method you'll need to encode and store your video as Theroa, H.264 (mp4) and VP8.
Long story short: if you're targeting modern computers running commercial as well as open source operating systems, in addition to the various mobile devices when you need to use HTML 5's <video> tag with a multi-codec format, and to ensure your video is "universally" playable it is still acceptable to have Flash as a fallback. Here come the steps:
1) Store the video in a versatile format: if you read what I wrote a few paragraphs ago carefully, this might sounds complex; it actually is not -the Flash platform does support H.264 (so, mp4) and most of the mobile platforms that don't have Flash (Apple iOS and others) also support H.264. In order to convert your video to mp4, by personal recommendation is Handbrake: handbrake.fr.
2) Arrange video metadata: by default, MPEG-4 videos' metadata, i.e. the information with regards to the length, title, ... of the video, is stored at its end. On the other hand, when you download a vide the beginning of the file gets downloaded first; as a result you need to move this metadata to the beginning of the MPEG-4 video so that playback can start "instantly". To do so, use MP4 Metadata Mover.
3) Use a Flash player that can read MPEG-4: this step is simple, just download it from the Strobe Media Playback Web site; and once downloaded read the documentation for it. The file we are interested in the package is called StrobeMediaPlayback.swf.
4) Put all these on your Web page properly with JavaScript: in short, you need to write a logic in JavaScript that uses Flash if it can, and if not uses the HTML 5 <video> tag. As a bonus, the code I'm sharing with you also automatically and dynamically resizes the video based on the browser window size (useful for mobiles): click here to download.
To use that video.js file, for example with a video called Fireworks with a resolution of 958 * 540 you simply need to add the below code: