How does CDN implement video acceleration? What are the key technologies? - 面试题

Importance of CDN Video Acceleration

Video content is the main source of internet traffic consumption, accounting for over 60% of global internet traffic. CDN video acceleration significantly improves user satisfaction and reduces bandwidth costs by optimizing video transmission and playback experience.

Core Technologies for Video Acceleration

1. Adaptive Bitrate (ABR)

How It Works

Adaptive bitrate dynamically adjusts video bitrate and resolution based on user's network conditions and device capabilities:

Process:

Client detects network bandwidth
Selects appropriate bitrate level
Downloads corresponding bitrate video segment
Continuously monitors network conditions
Dynamically adjusts bitrate

Bitrate level example:

json
{
  "streams": [
    {
      "bitrate": 500000,
      "resolution": "640x360",
      "fps": 30,
      "codec": "h264"
    },
    {
      "bitrate": 1000000,
      "resolution": "854x480",
      "fps": 30,
      "codec": "h264"
    },
    {
      "bitrate": 2000000,
      "resolution": "1280x720",
      "fps": 30,
      "codec": "h264"
    },
    {
      "bitrate": 4000000,
      "resolution": "1920x1080",
      "fps": 30,
      "codec": "h264"
    },
    {
      "bitrate": 8000000,
      "resolution": "1920x1080",
      "fps": 60,
      "codec": "h265"
    }
  ]
}

ABR Algorithms

Common algorithms:

1. Buffer-based algorithm

javascript
function selectBitrate(bufferLevel, bitrates) {
  if (bufferLevel < 5) {
    // Low buffer, select lowest bitrate
    return bitrates[0];
  } else if (bufferLevel < 10) {
    // Medium buffer, select medium bitrate
    return bitrates[Math.floor(bitrates.length / 2)];
  } else {
    // Sufficient buffer, select highest bitrate
    return bitrates[bitrates.length - 1];
  }
}

2. Throughput-based algorithm

javascript
function selectBitrate(throughput, bitrates) {
  // Select highest bitrate not exceeding current throughput
  return bitrates.filter(b => b.bitrate <= throughput)
                .sort((a, b) => b.bitrate - a.bitrate)[0] || bitrates[0];
}

3. Hybrid algorithm

javascript
function selectBitrate(bufferLevel, throughput, bitrates) {
  // Combine buffer and throughput
  const bufferFactor = Math.min(bufferLevel / 30, 1);
  const throughputFactor = Math.min(throughput / 5000000, 1);
  const combinedFactor = (bufferFactor + throughputFactor) / 2;
  
  const index = Math.floor(combinedFactor * (bitrates.length - 1));
  return bitrates[index];
}

2. Video Encoding Optimization

Encoding Format Selection

Mainstream encoding formats:

H.264/AVC

Pros: Good compatibility, widely supported
Cons: Relatively low compression efficiency
Use cases: Scenarios requiring wide compatibility

H.265/HEVC

Pros: 50% smaller than H.264
Cons: High encoding computational cost, some old devices don't support
Use cases: HD video, bandwidth-constrained scenarios

VP9

Pros: Open source, 40% smaller than H.264
Cons: Long encoding time, average compatibility
Use cases: Web video playback

AV1

Pros: Latest standard, 60% smaller than H.264
Cons: Extremely high encoding computational cost, limited support
Use cases: Future video, ultra HD video

Encoding Parameter Optimization

Key parameters:

1. Bitrate control

bash
# Encode using FFmpeg
ffmpeg -i input.mp4 \
  -c:v libx264 \
  -b:v 2000k \
  -maxrate 2500k \
  -bufsize 5000k \
  -c:a aac \
  -b:a 128k \
  output.mp4

2. Resolution adaptation

bash
# Generate multiple resolution versions
ffmpeg -i input.mp4 \
  -vf "scale=640:360" \
  -c:v libx264 \
  -b:v 500k \
  output_360p.mp4

ffmpeg -i input.mp4 \
  -vf "scale=1280:720" \
  -c:v libx264 \
  -b:v 2000k \
  output_720p.mp4

3. Frame rate optimization

bash
# Reduce frame rate to reduce bitrate
ffmpeg -i input.mp4 \
  -r 24 \
  -c:v libx264 \
  -b:v 1500k \
  output_24fps.mp4

3. Video Segmentation and Streaming Protocols

HLS (HTTP Live Streaming)

Features:

Developed by Apple, widely supported
Based on HTTP, easy to deploy
Supports AES encryption

File structure:

shell
video.m3u8 (master playlist)
├── stream0.m3u8 (sub playlist)
│   ├── segment0.ts
│   ├── segment1.ts
│   └── ...
├── stream1.m3u8
│   ├── segment0.ts
│   ├── segment1.ts
│   └── ...
└── ...

M3U8 playlist example:

m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0

#EXTINF:10.0,
segment0.ts
#EXTINF:10.0,
segment1.ts
#EXTINF:10.0,
segment2.ts
#EXT-X-ENDLIST

DASH (Dynamic Adaptive Streaming over HTTP)

Features:

International standard, cross-platform support
XML-based description
Supports multiple encoding formats

MPD file example:

xml
<?xml version="1.0"?>
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" type="static">
  <Period>
    <AdaptationSet mimeType="video/mp4">
      <Representation id="1" bandwidth="500000" width="640" height="360">
        <BaseURL>video_360p.mp4</BaseURL>
      </Representation>
      <Representation id="2" bandwidth="2000000" width="1280" height="720">
        <BaseURL>video_720p.mp4</BaseURL>
      </Representation>
    </AdaptationSet>
  </Period>
</MPD>

4. CDN Video Cache Optimization

Segment Cache Strategy

Strategies:

Cache by video segments
Prioritize caching popular segments
Preload subsequent segments

Configuration example:

nginx
# Cache video segments
location ~* \.ts$ {
    proxy_cache video_cache;
    proxy_cache_valid 200 1h;
    proxy_cache_key "$scheme$request_method$host$uri";
    
    # Cache lock to prevent cache stampede
    proxy_cache_lock on;
    proxy_cache_lock_timeout 5s;
}

# Cache playlists
location ~* \.m3u8$ {
    proxy_cache video_cache;
    proxy_cache_valid 200 5m;
    proxy_no_cache $http_pragma $http_authorization;
}

Intelligent Preloading

Strategies:

Preload next segment
Preload next bitrate level
Predict based on user behavior

Implementation example:

javascript
// Preload next segment
function preloadNextSegment(currentSegment, nextSegmentUrl) {
  const preloadLink = document.createElement('link');
  preloadLink.rel = 'preload';
  preloadLink.href = nextSegmentUrl;
  preloadLink.as = 'video';
  document.head.appendChild(preloadLink);
}

// Preload multiple segments
function preloadSegments(segments, count = 3) {
  segments.slice(0, count).forEach(segment => {
    preloadNextSegment(null, segment.url);
  });
}

5. Video Playback Optimization

First Screen Time Optimization

Optimization strategies:

1. Use keyframes

bash
# Increase keyframe frequency
ffmpeg -i input.mp4 \
  -c:v libx264 \
  -g 30 \
  -keyint_min 30 \
  output.mp4

2. Optimize first frame

bash
# Start encoding from keyframe
ffmpeg -i input.mp4 \
  -c:v libx264 \
  -force_key_frames "expr:gte(t,n_forced*2)" \
  output.mp4

3. Preload first screen

javascript
// Preload first screen content
video.addEventListener('loadedmetadata', () => {
  const preloadTime = 5; // Preload 5 seconds
  video.currentTime = Math.min(video.duration, preloadTime);
  video.currentTime = 0; // Back to start
});

Seek Optimization

Optimization strategies:

1. Fast positioning

javascript
// Fast seek to specific time
function seekToTime(video, time) {
  const segmentIndex = Math.floor(time / segmentDuration);
  const segmentUrl = getSegmentUrl(segmentIndex);
  
  // Directly load target segment
  video.src = segmentUrl;
  video.currentTime = time % segmentDuration;
}

2. Preload seek position

javascript
// Preload segments around seek position
video.addEventListener('seeking', () => {
  const currentTime = video.currentTime;
  const segmentIndex = Math.floor(currentTime / segmentDuration);
  
  // Preload 2 segments before and after
  for (let i = segmentIndex - 2; i <= segmentIndex + 2; i++) {
    if (i >= 0 && i < totalSegments) {
      preloadSegment(i);
    }
  }
});

6. Video Transmission Optimization

Protocol Optimization

HTTP/2 advantages:

Multiplexing: Reduce number of connections
Header compression: Reduce transmission overhead
Server push: Proactively push resources

HTTP/3 advantages:

Based on UDP: Reduce connection establishment time
Improved congestion control: Better network adaptability
Connection migration: Support network switching

Configuration example:

nginx
listen 443 ssl http2;
listen 443 ssl http3;

Transmission Protocol Selection

TCP vs UDP:

TCP:

Pros: Reliable transmission, widely supported
Cons: Higher latency, not suitable for real-time live streaming

UDP:

Pros: Low latency, suitable for real-time live streaming
Cons: Unreliable, requires application-layer retransmission

Selection recommendations:

VOD: Use TCP (HTTP)
Real-time live streaming: Use UDP (like WebRTC)

7. Video Quality Monitoring

Key Metrics

Playback quality metrics:

Startup time: Time from click to play to start playing
Buffer count: Number of buffers during playback
Buffer duration: Duration of each buffer
Bitrate switch count: Frequency of adaptive bitrate switches

User experience metrics:

Stutter rate: Ratio of stutter time to total playback time
Average bitrate: Average bitrate during playback
Resolution: Average resolution during playback

Monitoring Implementation

Example:

javascript
// Video playback monitoring
const videoMetrics = {
  startTime: null,
  bufferEvents: [],
  bitrateChanges: [],
  currentBitrate: null
};

video.addEventListener('play', () => {
  videoMetrics.startTime = Date.now();
});

video.addEventListener('waiting', () => {
  videoMetrics.bufferEvents.push({
    time: Date.now(),
    duration: null
  });
});

video.addEventListener('playing', () => {
  const lastBufferEvent = videoMetrics.bufferEvents[videoMetrics.bufferEvents.length - 1];
  if (lastBufferEvent && lastBufferEvent.duration === null) {
    lastBufferEvent.duration = Date.now() - lastBufferEvent.time;
  }
});

function reportMetrics() {
  const metrics = {
    startupTime: videoMetrics.startTime ? Date.now() - videoMetrics.startTime : 0,
    bufferCount: videoMetrics.bufferEvents.length,
    totalBufferTime: videoMetrics.bufferEvents.reduce((sum, event) => sum + (event.duration || 0), 0),
    bitrateChanges: videoMetrics.bitrateChanges.length
  };
  
  // Send to monitoring server
  fetch('/api/video-metrics', {
    method: 'POST',
    body: JSON.stringify(metrics)
  });
}

// Report periodically
setInterval(reportMetrics, 30000);

CDN Video Acceleration Best Practices

1. Content Preparation

Use modern encoding formats (H.265, AV1)
Generate multiple bitrate levels
Optimize keyframe interval
Compress audio

2. Cache Strategy

Cache by segments
Prioritize caching popular content
Set reasonable TTL
Use cache warming

3. Transmission Optimization

Use HTTP/2 or HTTP/3
Enable compression
Optimize TCP parameters
Use CDN edge nodes

4. Playback Optimization

Optimize first screen time
Implement intelligent preloading
Optimize seek experience
Provide fallback options

5. Monitoring and Analysis

Real-time monitoring of playback quality
Analyze user behavior
Optimize bitrate switching algorithm
Continuous improvement

Common Issues and Solutions

Issue 1: Slow First Screen Loading

Causes:

Bitrate too high
High network latency
Cache miss

Solutions:

Lower initial bitrate
Use CDN acceleration
Warm up popular content

Issue 2: Frequent Buffering

Causes:

Unstable network
Untimely bitrate switching
Improper cache strategy

Solutions:

Optimize ABR algorithm
Increase buffer size
Optimize cache strategy

Issue 3: Blurry Quality

Causes:

Bitrate too low
Poor encoding quality
Resolution mismatch

Solutions:

Increase bitrate
Optimize encoding parameters
Adaptive resolution

Interview Points

When answering this question, emphasize:

Understanding of core video acceleration technologies
Mastery of adaptive bitrate implementation principles
Knowledge of pros and cons of mainstream streaming protocols
Practical video acceleration optimization experience
Ability to analyze and solve video playback issues