Top 10 Mistakes in Handling Website Videos and How to Solve Them
It should come as no surprise that video use on the internet is exploding. You can see the dramatic growth of video on the average site in this SpeedCurve blog post.
With the growth in video comes greater bandwidth use, which is not only costly for your IT budget, but for your visitors as well. Beyond the expense, there is the user experience to consider. The heavier the page, the longer it will take to load, and the greater likelihood visitors will abandon your site. Page load speed is also an important factor in SEO ranking, so clearly video is something we need to take seriously and get right. Video is challenging, presenting terms still unfamiliar to developers - like codecs, bitrate and adaptive bitrate streaming. As a result, mistakes are being made in video implementation.
Cloudinary solves a large number of common video issues. For developers who are not yet using Cloudinary, we thought it might be helpful if we reviewed some of the video challenges we encounter on a daily basis and how they can (and should) be solved:
1) Using the wrong video resolution
Probably the most common error we encounter is videos being delivered at a resolution that is way too large for how it is being displayed. Just like with images, it's a waste to deliver more pixels than the browser can render and rely on browser-side resizing.
Encoding video is time consuming, and there are not many solutions that will do this for you in an efficient manner. So what does a developer do? Typically they take what they have, reference it in a <video> tag on the page, and move on to other, easier things. This is extremely common too. Take this example from the yahoo.com homepage. The container for the video is 215 pixels wide, while I'm getting a video 1080 pixels wide. What a waste!
While the results will look the same either way, encoding the video at the proper size on the server can save a tremendous amount of bandwidth, each additional pixel sent down to the browser that it can't render is wasted bytes.
2) Using the wrong video codec
Similar to the above, developers unfamiliar with video will take the approach of just using what was given to them and throwing it on the page. Oftentimes this can result in using a codec that is not optimized for the web, wasting bytes again. Think of codecs like you would image formats. An image will have vastly different weights while looking nearly the same whether it’s a .jpg,.png, .gif or .tiff.
Video codecs are similar, so you want to make sure you're choosing the right tool for the job. The old H.264 video codec standard is supported by every browser and was made for web video delivery, so at the very least you should be encoding your web videos as H.264 video codec.
3) Using too high a video bitrate
Bitrate is simply the number of bits it takes to encode 1 second of video. Take the total number of pixels in a frame, multiply by the frames per second, then multiply by the bytes per pixel to get the bitrate. Just like the quality setting on images, using too high of a setting can result in a heavier file for no perceived difference in visual fidelity. Since your bitrate is a function of the resolution, I'd find the resolution you need, then find the bitrate multiplier that results in the visual fidelity you desire. Going forward you can repurpose that multiplier when encoding at different resolutions. Or you could simply use Cloudinary to do this automatically.
4) Not using adaptive bitrate streaming
Have you ever been watching Netflix or YouTube and notice the quality change? Suddenly your crisp and smooth video became grainy and choppy? If so, you have witnessed Adaptive Bitrate Streaming in action. This is the practice of encoding a single video at multiple bitrates/resolutions and letting the video player determine which one is most appropriate for the visitor based on their screen size and bandwidth availability. Instead of buffering, or downloading a video that too large for the display, each visitor will get the right resolution/bitrate and it will adapt if network conditions change mid-stream. This approach should only be used for longer form videos and is unnecessary for short videos, such as those shorter than 20 seconds or so.
5) Not using modern video codecs
I mentioned the H.264 codec above, but there are actually more modern and efficient codecs that you can use! Codecs such as VP9 and H.265 are anywhere from 30% to 50% more efficient, so they can't be ignored if website performance is something you care about. This is analogous to the WebP, JPEG 2000 and JPEG XR image formats, which are more efficient than the old standby, JPG, but not universally supported. Luckily it's pretty easy to take advantage of these modern codecs without writing a ton of conditional logic to figure out which one to present to which user. Read on!
6) Not presenting multiple codec options
Recently we wrote about optimizing video by choosing the correct codec. The cool thing about the HTML5 video player is that you can present it with multiple video options, and it'll play the first one it knows how to play. This makes it super simple to present multiple codecs and let the browser pick the most efficient one it knows how to play. If you're serious about user experience and saving money, this is one of the easiest ways to do both.
7) Using the wrong bitrate for the content
Ever watch an action scene or football game is the content is choppy? That happens when the bitrate was set too low to account for all the movement in the scene. One of the methods codecs use to compress video content is sharing pixel information across frames. In action scenes, where things are moving around a lot, there's not a ton of information that remains common across frames. In this situation, you may consider reducing the video resolution while maintaining a higher bitrate than usual.
On the flip sides, there are boring scenes as well. A high bitrate probably isn't required for movies like “Driving Miss Daisy,” even at higher resolutions. Additional savings could be realized by encoding video content like this at a lower bitrate than usual.
8) Not muting autoplaying videos
Browsers today do not autoplay video unless they are muted. Chrome released the muting requirement in April 2018 and there are still video banners sitting static out there today. So, for any hero background video, or any other video you want to play automatically upon page load, make sure that you add the "muted" attribute to the video tag, like this:
<video autoplay muted>
...
</video>
Also, if your video isn't autoplaying on mobile devices, and you want it to, make sure to add the "playsinline" attribute:
<video autoplay muted playsinline>
...
</video>
9) Using a heavy video player instead of the HTML5 video player
Any specialized video player requires an extra download for the user. These video players are plugins and add some awesome functionality, like adaptive bitrate streaming support, analytics events, clickable hotspots, 360 video support and other features that are necessary if you can't provide the experience otherwise.
For things like video hero backgrounds or small short form video clips though, they are overkill and completely unnecessary, resulting in more wasted bytes as the user has to download the player. The HTML5 video player is actually quite good and can probably serve the needs of most of the video content on the web. Read more here!
Of course, for those times when you need a video player, Cloudinary offers a free, open-source player based on Video.js you are encouraged to use.
10) Using a GIF instead of a video
Animated GIFs are pretty awesome. Short, often funny, video clips add context that a still image just can't. GIF is a pretty amazing format -- in fact, it was actually the very first web-friendly image format! On the flip side, however, the format is aging and hasn't kept up with the times. The last update to GIF was 29 years ago! GIFs can be extremely large, several megabytes for a small clip.
The solution? Convert these to video formats! Modern video codecs are designed from the beginning to be web-friendly, bandwidth-efficient methods of presenting moving pictures. While we salute the GIF format and look at it with reverence, we are doing a disservice to ourselves and our visitors by continuing to use it when better alternatives exist.
GIF (2.83MB)
Video (51kb)
Final Words
In this article, we've tried to list the most common video-related website issues we encounter at Cloudinary on a daily basis. While it certainly does not address every issue, we did our best to highlight the ones that are most cost effective to solve and offer a general explanation from which you can do further research to find a solution that works best for you.
If you haven't heard about Cloudinary yet, you will be happy to know that we have already solved all of the issues described above and then some. Every video uploaded to Cloudinary can be dynamically transformed to any size, format, codec and quality, so you're able to easily test different settings that best fit your website and user expectations. All videos are delivered from a fast CDN using correct cache settings, employing every best practice in the book. Finally, Cloudinary's cloud-based, dynamic video capabilities are a perfect fit for responsive design to OTT.
Cloudinary actually offers much more than that, managing your video and image uploads and cloud-based storage and is free to sign up. Check out Cloudinary, and let us know what you think. Also, if we've missed anything crucial in the list above, please tell us about in the comment thread below. Much appreciated!
View original content: Here
Related Cloudinary News: