video

🔝 page static resources | 🔙 on a stand – font

As an important form of media, video can improve the richness of website content, but it is also a burden for network loading. So there are some optimizations for video on the Web like the following.

1. Use the right video format

Like pictures, different video encoding formats have different data sizes. Currently, the format commonly used in HTML5 Video is MPEG-4. In addition to MPEG-4, a new video format called WebM is supported.

WebM(VP9) is smaller than MPEG-4(X264), but compatibility (2021.6.5) is also relatively poor. Therefore, consider specifying multiple < sources > in

<video>
    <source src="/static/video/me.webm" type="video/webm">
    <source src="/static/video/me.mp4" type="video/mp4">
</video>
Copy the code

In addition, AV1 encoding [1] is about 30% smaller than VP9(WebM) and 45-50% smaller than X264 (MPEG-4) [2].

2. Video compression

For video, we can also conduct lossy and lossless compression, which can also effectively reduce the size of the video. Here are some common tools:

  • HandBrake
  • Freemake
  • Hybrid
  • MeGUI

3. Remove unnecessary track information

In the previous section, we mentioned that you can use

So, since we don’t need sound, can we just remove the track data? Yes, this will also help reduce the size of the video even further.

Step 4 Use “Flow”

Try having your browser play your video using “Streaming” or small shards, such as the popular HTTP Live Streaming (HLS) technique. Simply put, with HLS, your video will contain an index file of.m3U8 and a series of.ts shards containing the content to play. The browser downloads fragments of a video repeatedly to play it, avoiding the traffic consumption of a full video download.

You can also try using MPEG-Dash [3], which is currently available in the open source community as a client implementation.

5. Remove unnecessary videos

For scenarios that don’t require video, the best way to optimize is to remove the video. On a small screen, for example, you can avoid downloading videos by media search:

@media screen and (max-width: 650px) {
    #hero-video {
        display: none; }}Copy the code

The optimization of video here only introduces some basic means, but for a heavy video website, it will include more optimization content, such as player SDK optimization, data prefetching, bit rate self-adaptation and so on. The reference contains a share on video experience optimization from station B [4], and interested students can read it further.

In addition, although some software tools for video processing are described above, FFmpeg[5] or related libraries are recommended for higher customization or integration requirements.

If you like, please follow my blog or subscribe to RSS feed.

“Performance Tuning” series

  1. Bring you a full grasp of front-end performance optimization 🚀
  2. How can caching be used to reduce remote requests?
  3. How can I speed up requests?
  4. How to speed up page parsing and processing?
  5. What is the general idea of static resource optimization?
    1. How to optimize performance for JavaScript?
    2. How to optimize the PERFORMANCE of the CSS?
    3. Graphics are great, but they can also cause performance problems
    4. Do fonts also need performance optimization?
    5. How to optimize performance for video? (this paper)
  6. 🔜 How can I avoid runtime performance problems?
  7. How can preloading improve performance?
  8. The end of the

At present, all the content has been updated to ✨ fe-performance-Journey ✨ warehouse, and the content will be synchronized to the nuggets one after another. If you want to read the content as soon as possible, you can also go directly to the repository.

The resources

  1. a technial overview of the AV1
  2. Speed Essentials: Key Techniques for Fast Websites (Chrome Dev Summit 2018)
  3. Dynamic Adaptive Streaming over HTTP (Wikipedia)
  4. 2019 GMTC Sharing – The evolution of video experience at B station
  5. FFmepg
  6. 8 Video Optimization Tips for Faster Loading Times
  7. Optimizing MP4 Video for Fast Streaming
  8. Web Performance 101: Video Optimization