Multimedia: video
As we learned in the previous section, media, namely images and video, account for over 70% of the bytes downloaded for the average website. We have already taken a look at optimizing images. This article looks at optimizing video to improve web performance.
|
Prerequisites:
|
Basic computer literacy,
basic software installed
, and basic knowledge of
client-side web technologies
.
|
|
Objective:
|
To learn about the various video formats, their impact on performance,
and how to reduce video impact on overall page load time while serving
the smallest video file size based on each browsers file type support.
|
For the average website,
25% of bandwidth comes from video
. Optimizing video has the potential for very large bandwidth savings that translate into better website performance.
It's best to
compress all video
,
optimize
<source>
order
, set
autoplay
,
remove audio from muted video
,
optimize video preload
，和
consider streaming
the video. The sections below describe each of these optimization techniques.
Most video compression work compares adjacent frames within a video, with the intent of removing detail that is identical in both frames. Compress the video and export to multiple video formats, including WebM, MPEG-4/H.264, and Ogg/Theora.
Your video editing software probably has a feature to reduce file size. If not, there are online tools, such as
FFmpeg
(discussed in section below), that encode, decode, convert, and perform other optimization functions.
Order video source from smallest to largest. For example, given video compressions in three different formats at 10MB, 12MB, and 13MB, declare the smallest first and the largest last:
<video width="400" height="300" controls="controls">
<!-- WebM: 10 MB -->
<source src="video.webm" type="video/webm" />
<!-- MPEG-4/H.264: 12 MB -->
<source src="video.mp4" type="video/mp4" />
<!-- Ogg/Theora: 13 MB -->
<source src="video.ogv" type="video/ogv" />
</video>
The browser downloads the first format it understands. The goal is to offer smaller versions ahead of larger versions. With the smallest version, make sure that the most compressed video still looks good. There are some compression algorithms that can make video look (bad) like an animated GIF. While a 128 Kb video may seem like it could provide a better user experience than a 10 MB download, a grainy GIF-like video may reflect poorly on the brand or project.
见
CanIUse.com
for current browser support of video and other media types.
To ensure that a looping background video autoplays, you must add several attributes to the video tag:
autoplay
,
muted
，和
playsinline.
<video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp4">
While the
loop
and
autoplay
make sense for a looping and autoplaying video, the
muted
attribute is required for autoplay in mobile browsers.
Playsinline
is required for mobile Safari, allowing videos to play without forcing fullscreen mode.
For hero-video or other video without audio, removing audio is smart.
<video autoplay="" loop="" muted="true" playsinline="" id="hero-video">
<source src="banner_video.webm"
type='video/webm; codecs="vp8, vorbis"'>
<source src="web_banner.mp4" type="video/mp4">
</video>
This hero-video code (above) is common to conference websites and corporate home pages. It includes a video that is auto-playing, looping, and muted. There are no controls, so there is no way to hear audio. The audio is often empty, but still present, and still using bandwidth. There is no reason to serve audio with video that is always muted.
Removing audio can save 20% of the bandwidth.
Depending on your choice of software, you might be able to remove audio during export and compression. If not, a free utility called
FFmpeg
can do it for you. This is the FFmpeg command string to remove audio:
ffmpeg -i original.mp4 -an -c:v copy audioFreeVersion.mp4
The preload attribute has three available options:
auto
|
metadata
|
none
. The default setting is
metadata
. These settings control how much of a video file downloads with page load. You can save data by deferring download for less popular videos.
设置
preload="none"
results in none of the video being downloaded until playback. It delays startup, but offers significant data savings for videos with a low probability of playback.
Offering more modest bandwidth savings, setting
preload="metadata"
may download up to 3% of the video on page load. This is a useful option for some small or moderately sized files.
Changing the setting to
auto
tells the browser to automatically download the entire video. Do this only when playback is very likely. Otherwise, it wastes a lot of bandwidth.
Video streaming allows the proper video size and bandwidth
(based on network speed) to be delivered to the end user. Similar to responsive images, the correct size video is delivered to the browser, ensuring fast video startup, low buffering, and optimized playback.
Optimizing video has the potential to significantly improve website performance. Video files are relatively large compared to other website files, and always worthy of attention. This article explains how to optimize website video through reducing file size, with (HTML) download settings, and with streaming.
发现此页面有问题吗？
最后修改：
,
由 MDN 贡献者
