Partner With Vanguard

Nov 1, 2022, 05:00 AM by Mark Havelka

When delivering video content through your website, there are many user-friendly tools available at your fingertips to ensure your video content is accessible to all users and devices.

If pictures are worth a thousand words, is a video worth a thousand pictures? Assuming your video is running at 24 frames per second, a 42-second video is a thousand pictures. But a video is more than just a series of pictures, it is sound as well. Video uses two of our senses to deliver us information, making it a powerful way to deliver content and is why we are seeing video used more and more on the web. Although it is an effective form of content, video can be complex. This article walks through all the factors that need to be considered when delivering video content through your website and the tools available to help you.

History of Video on the Web

Early websites and browsers were unable to play video natively. Instead, they relied on other applications to deliver and play video within a website. You may be familiar with Micromedia/Adobe’s Flash player which was one of the more popular means of delivering video. While this solution existed, creating videos that played nicely on the web was a challenge. The video had to be small, as your dial-up bandwidth was not conducive to watching video in real time. Additionally, the applications to deliver the video had to be purchased and were cumbersome to configure.

HTML 5 Video Element

Then came the latest web standard (HTML5), which instituted a native video element. This allowed web developers to simply select a video file to play and the browser would play it. No longer was there a need to include other applications to manage and play your video. Some of the features the HTML5 video element boasts are:

• Basic controls such as play/pause, seek, and volume control.
• Fallback formats, where the browser can switch to another video file format if the primary video format is not recognized.
• The ability to easily add subtitle files to the video for better accessibility.
• Can be styled like any other HTML element, making it flexible and adaptive to different sized screens.
• Progressive loading where pieces of the video are sent over time, instead of needing to download the entire video to play.

 

However, this element does have its limitations. Video files must be complete. This means that the video element will not accept partial video files or a live stream. This is especially true with the MP4 video format that has “keyframes” of important video data throughout the length of the video. The element also does not have the ability to switch video files based on the available bandwidth or have controls for switching videos based on language preference. Lastly, delivering your video through your website uses up a lot of bandwidth. Every user streaming or downloading a video from your website eats from your total bandwidth, slowing down the delivery of content to all your users. Unless you have multiple servers placed nearest your users, video content can slow your website’s response to other users. So how do we overcome these obstacles to make all our videos accessible to all our users?

Feature Rich Web Video

Since the HTML5 video element is like every other HTML element, it can be modified with JavaScript. This opens the possibilities for your web developer to create a feature-rich video player. For example, you might want to provide your users with the ability to change the resolution (quality) of the video they are watching or change it automatically for them if they are on a mobile or low-bandwidth device. In this case, we would create copies of the same video, but at different resolutions. If the user changes resolutions, we instruct the video element to load the other file. The same goes for language selection. But what about live video? Again, JavaScript comes to the rescue. Instead of specifying a video file to play, we provide the video element with a JavaScript object. This object will check the server and load the latest video file. Each video file will only be one to three seconds in length, as they are constantly being created by the live stream. The JavaScript then stitches these together to create a seamless live video steam on the user’s browser.

A Much Easier Solution

Luckily, there are services that already exist that take out all the hassle of having to implement this JavaScript. Popular content delivery networks (CDNs) such as YouTube and Vimeo provide you with all of the rich features we have become accustom to for web video. Simply create an account with one of these services (often for free) and upload your video. These CDNs can provide you with an embed code that you place on your website to display your video. This way, your website’s servers are not being bogged down with having to serve video traffic, your do not need to manage creating videos at different resolutions, and you do not incur the cost of adding custom written JavaScript. Some of these CDNs also offer additional features (sometimes for a fee) such as live streaming and password-protected private videos.

Start Recording

As you can see, video on your website can be as complex or simple as you would like it to be. Unless you have a need for some special controls or functionality, using an established CDN is your best bet for delivering your videos. Now that you know the technology behind the video, it’s time to get behind the camera.