Optimization techniques for video resource loading

Video Resource Optimization Loading Techniques

Video resources play a significant role in modern web applications, but their large size and high bandwidth consumption make them a performance bottleneck. Techniques such as preloading, lazy loading, and adaptive bitrate can effectively improve video loading efficiency and user experience.

Preloading Strategy Optimization

Preloading technology reduces playback wait times by fetching video resources before they are actually needed. The HTML5 standard provides multiple preloading modes:

<video preload="auto" controls>
  <source src="example.mp4" type="video/mp4">
</video>

Preloading parameters have three optional values:

• auto: The browser automatically decides the loading strategy.
• metadata: Only loads metadata (duration, dimensions, etc.).
• none: No preloading is performed.

For important video content, it is recommended to use auto mode with the prefetch directive:

<link rel="prefetch" href="hero-video.mp4" as="video">

In actual projects, it is necessary to balance preloading volume and performance consumption. Smart preloading can be achieved using the Intersection Observer API:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const video = entry.target;
      video.preload = 'auto';
      observer.unobserve(video);
    }
  });
});

document.querySelectorAll('video').forEach(video => {
  observer.observe(video);
});

Segmented Loading and Streaming Technology

HTTP-based segmented loading technology divides videos into smaller files for on-demand loading. HLS (HTTP Live Streaming) and DASH (Dynamic Adaptive Streaming over HTTP) are two mainstream solutions:

// HLS example
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource('https://example.com/video.m3u8');
  hls.attachMedia(videoElement);
}

// DASH example
dashPlayer.initialize(
  document.querySelector('#video-player'),
  'https://example.com/video.mpd',
  true
);

For custom segmented loading, the MediaSource API can dynamically process video data:

const mediaSource = new MediaSource();
videoElement.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
  fetch('/video/segment1.mp4')
    .then(response => response.arrayBuffer())
    .then(data => sourceBuffer.appendBuffer(data));
});

Adaptive Bitrate Technology

ABR (Adaptive Bitrate) technology dynamically switches video quality based on network conditions. Implementation solutions include:

1. Client-side detection:

function checkNetworkSpeed() {
  const start = Date.now();
  return fetch('/speed-test', { method: 'HEAD' })
    .then(() => {
      const duration = (Date.now() - start) / 1000;
      const size = 100000; // Test file size
      return size / duration;
    });
}

async function selectVideoQuality() {
  const speed = await checkNetworkSpeed();
  const quality = speed > 5000000 ? '4k' : 
                 speed > 2000000 ? '1080p' : '720p';
  videoElement.src = `/videos/${quality}/main.mp4`;
}

2. Server-side adaptive solution (using MSE):

const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
  
  function fetchSegment(quality) {
    fetch(`/video/${quality}/segment${segmentNum}.mp4`)
      .catch(() => fetchSegment(getLowerQuality(quality)))
      .then(response => response.arrayBuffer())
      .then(data => sourceBuffer.appendBuffer(data));
  }
  
  fetchSegment('1080p');
});

Cache Strategy Optimization

Effective caching strategies can reduce duplicate requests. Service Worker implementation for video caching:

// service-worker.js
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/videos/')) {
    event.respondWith(
      caches.match(event.request)
        .then(response => response || fetchAndCache(event.request))
    );
  }
});

async function fetchAndCache(request) {
  const cache = await caches.open('video-cache-v1');
  const response = await fetch(request);
  if (response.status === 200) {
    cache.put(request, response.clone());
  }
  return response;
}

For large video files, it is recommended to use Range requests with caching:

// Client-side code
videoElement.addEventListener('progress', () => {
  const buffered = videoElement.buffered;
  if (buffered.length > 0) {
    const start = buffered.start(0);
    const end = buffered.end(0);
    // Store buffered range in IndexedDB
    storeBufferedRange(videoId, start, end);
  }
});

function resumePlayback() {
  getBufferedRange(videoId).then(range => {
    if (range) {
      videoElement.currentTime = range.start;
    }
  });
}

Encoding and Format Selection

Video encoding formats directly impact loading performance:

1. Comparison of modern encoding formats:

• H.265/HEVC: Saves 50% bandwidth compared to H.264.
• AV1: Open-source format, saves 30% bandwidth compared to VP9.
• VP9: WebRTC standard format.

<!-- Multi-format fallback solution -->
<video controls>
  <source src="video.webm" type="video/webm; codecs=vp9">
  <source src="video.mp4" type="video/mp4; codecs=avc1">
  <source src="video.ogv" type="video/ogg; codecs=theora">
</video>

2. Encoding parameter optimization example (using FFmpeg):

# H.265 encoding
ffmpeg -i input.mp4 -c:v libx265 -crf 28 -preset fast -c:a aac output.mp4

# AV1 encoding
ffmpeg -i input.mp4 -c:v libaom-av1 -crf 30 -b:v 0 -strict experimental output.mkv

Playback Experience Optimization Techniques

1. Seamless playback technology:

// Create a video element pool
const videoPool = Array(3).fill().map(() => {
  const v = document.createElement('video');
  v.preload = 'auto';
  return v;
});

function playNextSegment() {
  const nextVideo = videoPool[currentIndex % 3];
  nextVideo.src = `segment${currentIndex+1}.mp4`;
  nextVideo.addEventListener('canplay', () => {
    videoElement.parentNode.replaceChild(nextVideo, videoElement);
    videoElement = nextVideo;
    currentIndex++;
  }, { once: true });
}

videoElement.addEventListener('timeupdate', () => {
  if (videoElement.currentTime > videoElement.duration - 3) {
    playNextSegment();
  }
});

2. Background buffering optimization:

// Page Visibility API
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // Reduce buffering speed when in the background
    videoElement.networkThrottling = true;
  } else {
    // Accelerate buffering when returning to the foreground
    videoElement.networkThrottling = false;
    videoElement.play();
  }
});

Mobile-Specific Optimizations

Mobile environments require special handling:

1. Cellular network detection:

const connection = navigator.connection || navigator.mozConnection;
if (connection) {
  if (connection.effectiveType === 'cellular') {
    videoElement.preload = 'metadata';
    videoElement.setAttribute('data-src', 'low-quality.mp4');
  }
}

2. Touch delay optimization:

videoElement.addEventListener('touchstart', (e) => {
  e.preventDefault();
  videoElement.play();
}, { passive: false });

3. Power-saving mode adaptation:

navigator.getBattery().then(battery => {
  battery.addEventListener('levelchange', () => {
    if (battery.level < 0.2) {
      reduceVideoQuality();
    }
  });
});

Monitoring and Performance Metrics

Establish a performance metrics collection system:

// Key metrics collection
const metrics = {
  firstFrameTime: 0,
  bufferingEvents: 0
};

videoElement.addEventListener('loadedmetadata', () => {
  metrics.loadStart = performance.now();
});

videoElement.addEventListener('playing', () => {
  metrics.firstFrameTime = performance.now() - metrics.loadStart;
});

videoElement.addEventListener('waiting', () => {
  metrics.bufferingEvents++;
});

// Report data
function reportMetrics() {
  navigator.sendBeacon('/analytics', JSON.stringify(metrics));
}
window.addEventListener('beforeunload', reportMetrics);

Use the Media Capabilities API to detect device capabilities:

navigator.mediaCapabilities.decodingInfo({
  type: 'file',
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 5000000,
    framerate: 30
  }
}).then(result => {
  if (!result.supported) {
    fallbackToH264();
  }
});

CDN and Edge Computing Optimization

Leverage CDN features to improve video distribution efficiency:

1. Region-aware loading:

// Get user's approximate region
fetch('https://ipapi.co/json/')
  .then(response => response.json())
  .then(data => {
    const region = data.continent_code;
    videoElement.src = `https://${region}.cdn.example.com/video.mp4`;
  });

2. Edge caching strategy:

# Nginx configuration example
location ~ ^/videos/ {
  proxy_cache video_cache;
  proxy_cache_key "$scheme://$host$request_uri";
  proxy_cache_valid 200 302 12h;
  proxy_cache_use_stale error timeout updating;
  proxy_pass http://video_origin;
}

3. P2P acceleration solution:

const peer = new SimplePeer({
  initiator: location.hash === '#init',
  trickle: false
});

peer.on('signal', data => {
  signalingChannel.send(JSON.stringify(data));
});

signalingChannel.onmessage = event => {
  peer.signal(JSON.parse(event.data));
};

peer.on('stream', stream => {
  videoElement.srcObject = stream;
});

Emerging Technologies Exploration

1. WebTransport video transmission:

const transport = new WebTransport('https://example.com:4999/video');
const stream = await transport.createBidirectionalStream();
const writer = stream.writable.getWriter();

// Receive video data
const reader = stream.readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  sourceBuffer.appendBuffer(value);
}

2. WebCodecs low-level API:

const decoder = new VideoDecoder({
  output: frame => {
    videoElement.decode(frame);
    frame.close();
  },
  error: e => console.error(e)
});

fetch('/video/stream')
  .then(response => response.arrayBuffer())
  .then(data => {
    const chunk = new EncodedVideoChunk({
      type: 'key',
      timestamp: 0,
      duration: 1000,
      data: data
    });
    decoder.decode(chunk);
  });

3. WebAssembly video processing:

// Load WASM decoder
const module = await WebAssembly.compileStreaming(
  fetch('h265-decoder.wasm')
);
const instance = await WebAssembly.instantiate(module, {
  env: {
    memory: new WebAssembly.Memory({ initial: 256 })
  }
});

function decodeFrame(data) {
  const ptr = instance.exports.alloc(data.length);
  new Uint8Array(instance.exports.memory.buffer, ptr, data.length)
    .set(data);
  instance.exports.decode(ptr, data.length);
  const outputPtr = instance.exports.get_output();
  const output = new Uint8Array(
    instance.exports.memory.buffer,
    outputPtr,
    instance.exports.get_output_size()
  );
  return output;
}