From the author: video on the net can be a double-edged sword. Autoplay video sites are reporting growing popularity (who hasn’t stopped on social media to see what the video is about?), Resulting in longer website visits. However, if the video doesn’t play quickly or smoothly, visitors can get frustrated and you run the risk of alienating the very customers who should have been more deeply involved.
There are many different use cases for online video delivery. In this post, I want to talk about the use of background videos on the web and how we can improve their delivery and playback.
Background video is a great way to improve the delivery of content on your website. In addition to words and images, there is some movement in the background that can help your customers better understand your services and why they should use them. But things can go wrong. The two biggest problems I’ve seen are:
Users scroll through the video before it starts. If they never see the video being played, the purpose of the video is lost.
The background video keeps starting and stopping. Every time the video stops, it initiates a context change, distracting the visitor.
So what can you do to make the video added to your site play quickly and efficiently? Here are some tips that can help speed up video delivery.
By using the video and source tag, you can provide various video formats. The webm format usually results in smaller file sizes, so browsers that support this format can deliver the video to the end user faster:
<video autoplay muted>
<source src= video…webm>
<source src= video…mp4>
Your Browser does not support video…
Remove audio track
Since the background video and (looped GIF video) generally do not play audio, removing the audio track from a video can reduce its size by 5-10%. For example, this is ffprobe’s output from a background video:
This is an audio track, and it plays at 192 kbps, no one can hear it. Removing this would drastically reduce the file size and improve playback. (If you want to use ffprobe for video, it is part of FFMPEG, I created an API – you can find it at //streamclarity.com/probe?url=
Tip: A quiet audio track still takes up “space” in the video file. While it is true that empty data is compressed very well, completely removing the audio track from a video file saves even more space. With FFMPEG and other video editing tools, this can be done easily.
Poster tag: delete the poster
In the video tag, you can specify a poster image that appears before the video is played. This file will be loaded before (or at the same time) with the video, which will delay the video playback. He can also add a poster flash before the start of the video, which can be confusing.
In the example below, a bunny flash appears in the poster image before the start of the video.
Estimate the length
The length of the video does not actually affect the start of playback or the number of loops. But it’s important to remember that short videos work best for background videos, and probably 3-4 minute videos about your products are not suitable for this. (But post this video on your page for anyone interested!)
Lower your bitrate
Video bitrate is measured in megabytes per second – this is the amount of video that is used during each second of playback. To decrease the bitrate – you can either decrease the video size or increase the compression (which affects the quality). Another important point to keep in mind is that US cellular operators are increasing video playback speeds on their networks to 1.5MB / s (for example, T-Mobile’s BingeOn and AT&T’s StreamSaver). Having a video that can play at less than 1.3 MB / s (leaving room for other files) is critical to successful streaming on US mobile devices.
Test video playback
Finally, you should always check the video playback. I created StreamOrNot, a free tool that measures the start time and latency characteristics of any video on the Internet. You can use your favorite network throttling mechanism to see how fast your video will play under different conditions. If you find that the video takes too long to start playing, you can re-encode it at a lower resolution or slightly increase the compression – reducing the file size and ensuring faster video transfer to the browser.
Video on the Internet is not that hard, but there are a few simple steps you can take to ensure your videos can be played quickly by users. By ensuring that the video bit rate is high enough (by removing the audio track, downsizing and compressing the video), you can ensure that the background video plays quickly and without interruption. Testing with tools like StreamOrNot can help you determine if a video will run fast enough for your end users.
Author: Doug sillars
A source: //calendar.perfplanet.com
Editorial staff: Webformyself team.
PSD to HTML
Layout of the site in HTML5 and CSS3 from scratch