Embedding video within an HTML page adds a very nice interactive experience for just about any web page. In the past, my experiences were horrendous, as I was adding a video element to a business website, for the very first time. I did not know that I needed to check the various browsers for compatibility or make sure that the video was not eating up bandwidth, not to mention finding out if my media format would even work properly. Height and width control were also a huge deal. People would contact me because the videos were resizing themselves (ultimately correcting themselves) whenever they would encounter them. I learned the hard way and it was not pretty.

Image from https://www.cincopa.com

What I had to learn was that browsers may support different video formats and you have to use a specific element to determine which formats will be covered in the browser that you choose to work in. This is important, because there are various web browsers, as well as platforms that, you must consider. I was just shoving videos into web pages with little concern about how and if it would work perfectly.

I recall working with Adobe Flash , which was amazing for creating animations that worked in webpages. One could create an entire website with just Flash, but it was rather “buggy” and it was a bandwidth eater in my case. HTML 5 took the helm in the declining years of Flash, making embedding video in HTML much easier.

MDN Web Docs, by Mozilla (the folks behind the Mozilla Firefox web browser) provides online learning documents that are devoted to “Multimedia and Embedding,” in a very easy to understand, fluent format. Features such as “width and height,” autoplay, looping, and preloading are covered, along with several video controls. It’s a pretty nifty resource, although it offers much of what you find in the videos by Joseph Labrecque on LinkedIn Learning (Learning Web Audio and Video), I believe that it offers a more intricate look, starting with basic HTML, versus having to reach back and pull up past videos on that topic. Check out what they have to add to what you already know.

This is a revised version of a blog post titled “The Element of Video on the Web” on Web Publishing Unanimous.

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Publishing for the Web Copyright © by TCOM 3335 (Spring 2021 and Fall 2022) at UHD is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book