Way back when I began building and launching websites, video was not used much as it is today. Youtube, Vimeo, Facebook, Twitter, and Instagram didn’t exist yet.
The HTML5 video element was not released yet.
So if you wanted to display video on your static website you had a few choices:
- Flash
- JW Player plugin
Today, this is how you would use the HTML5 video element:
Since I perform lot’s of video editing, I just want to share a few things that I have learned about video and the web.
Many of what I learned has been through the old fashion trial and error method.
Yes, many failures.
As one who builds websites, information about video can fork in many directions:
- Video Editors
- Video Cameras
- Computer Hardware for Editing Video
- Video Formats
- Online Video Sharing Platforms
- Mobile Devices
- Do you need 4K?
As you can see, getting into the subject of video is a whole curriculum of its own. The focus in this post is explaining the basic video Formats that are used on the web and why. Just enough information for a web developer. If you are intrigued and want to learn more, the sky is the limit as there is so much instruction and teaching available.
Video Format Basics
Simply put, a video file consists of two parts or components:
- Codec
- Container
Codec
A codec compresses the video so it will take up less space.
Codecs will also decompress the video for playback.
Thats why the word Codec is really a combination of two words:
Co = compress
Dec = decompress
Two common Codecs are: X264 and MPEG4.
Container
The second item of a video format is the container (like a box) that holds the video, audio and other pertinent video data.
The container is also known as the video format (mp4, avi, mov, wmv).
Video Formats For The Web
Video formats that you may encounter on the web. A simple and quick guide for the beginner.| Format | Advantages | Disadvantages |
|---|---|---|
| MP4 .mp4 | Most popular format, used on prominent social media: youtube, vimeo, instagram, facebook. Most suitable for live streaming, There is less loss of quality with capability of higher compression. Can play on major media players and sound card drivers. | Not as easy to edit or update (from a movie making viewpoint). |
| AVI .avi | Audio Video Interleave. Although developed by Microsoft, it can run on all OS[mac, linux, win]. Advantage: can store both video & audio in a single file. Has high quality audio fidelity. | Huge files, compression a must. Same codec that created your movie needs to be used to view it on another device. Does not support JS interactivity. |
| MOV .mov | Developed by Apple and compatible with both Mac and Win platforms. can hold different media elements, including video and audio, all in one compact place. Best for transmitting files on the internet, Used primarily on the web. | Requires QuickTime Media Player. Uses higher compression so video quality may suffer. |
| WEBM .webm | Open source Very high quality video quality even on older computers. Many online video platforms like Youtube do support it. | Currently only supported by Chrome & FF. Partial mobile support: some Android browsers. Many media players do not support this format. To play offline, need to convert to MP4 or AVI. |
| WEBVTT .vtt | Web Video Text Tracks Format (webvtt). Developed by W3C, a cross platform and cross browser compatibilty. Uses the HTML5 | Not as popular format today. Information not as readily available as compared to other formats. |
Here are additional video formats that are available:
- OGG [.ogg] – open container format maintained by the Xiph.Org Foundation.
- FLV [.flv] – Flash Video by Adobe Systems Macromedia FutureWave
- WMV [.wmv] – Windows Media Video: based on the Microsoft Advanced Systems Format format and compressed with Windows Media compression.
Conclusion
“Nothing says ‘yawn’ more than an interminable text-based email or 50-slide attachment. Including a video within a brief email and delivering content in multimedia formats can help drive response rates, improve information retention and make your company or offer more memorable.” [Andy Zimmerman]
As a developer, you will come across video formats for the web.
You will either be:
- Embedding video on websites
- Creating videos for yourself or for clients
- Managing videos on platforms such as Youtube, Facebook, and Instagram
This is the mobile media generation. The majority of people have a mobile device and several social media accounts.
To become a well-rounded developer or designer, it is imperative that you understand video as it pertains to web development.
Gerald Watanabe
Islandwebtek
