Detect Weak Network in H5 Video Playback Using NetworkInformation and Video Events

Background

Users frequently report video playback freezing at a certain point, which is often caused by weak network conditions. To improve user experience and reduce complaints, a prompt should be shown when the network is poor.

Current Situation

The project uses the Chimee player (https://www.chimee.org/index.html), which lacks built‑in automatic loading prompts for buffering. However, Chimee’s plugin system allows us to create a custom video‑loading plugin.

Solution Design

Using NetworkInformation

We can determine whether the network is weak by checking the browser’s navigator.connection object (NetworkInformation API). The object provides properties such as effectiveType and downlink. By listening to the onchange event, we can display a warning when the connection degrades.

Advantages : native browser support, relatively simple implementation.

Disadvantages : state changes are not real‑time (may be minute‑level), compatibility issues with browsers like Firefox and Safari, and variations across devices that can cause false positives.

Listening to Video Element Events

Chimee wraps the HTML video element, so we can access the underlying video node in a plugin. The waiting event fires when playback stalls, and the canplay event fires when playback resumes. By handling these two events we can show or hide a loading indicator.

Feature Extension: Network Speed Detection

To display the current network speed, we can download a small image (or any small resource) and measure the time taken, then calculate the bandwidth. The following code implements this logic.

// Calculate network speed
function calculateSpeed() {
  // Image size 772 Byte
  const fileSize = 772;
  // Append timestamp to avoid caching
  const imgUrl = `https://xxx.png?timestamp=${new Date().getTime()}`;
  return new Promise((resolve, reject) => {
    let start = 0;
    let end = 1000;
    const img = document.createElement('img');
    start = new Date().getTime();
    img.onload = function () {
      end = new Date().getTime();
      // Speed in B/s
      const speed = fileSize / (end > start ? end - start : 1000) * 1000;
      resolve(speed);
    };
    img.onerror = reject;
    img.src = imgUrl;
  }).catch(err => { throw err; });
}

// Unit conversion
function translateUnit(speed) {
  if (speed === 0) return '0.00 B/s';
  if (speed > 1024 * 1024) return `${(speed / 1024 / 1024).toFixed(2)} MB/s`;
  if (speed > 1024) return `${(speed / 1024).toFixed(2)} KB/s`;
  return `${speed.toFixed(2)} B/s`;
}

By calling calculateSpeed periodically (e.g., with setInterval), the UI can show real‑time bandwidth information.

System Flow

The overall process is illustrated below:

Conclusion

Using Chrome DevTools’ Network throttling, developers can simulate weak‑network conditions and verify the implementation. The final result shows a functional weak‑network prompt with optional bandwidth display, enhancing user experience during video playback.