| 方案 | 核心原理 | 服務端要求 | 瀏覽器支持 | 適用場景 |
|---|
| HTTP Range 請求 (Pseudo-streaming) | 瀏覽器發送 Range: bytes=0-，服務端返回 206 部分內容 | Web 服務器支援 Range (Nginx/Apache/IIS 默認支援) | 所有現代瀏覽器 | 單一碼率、簡單部署、中小文件 |
| HLS (HTTP Live Streaming) | 視頻切片為 .ts 片段 + .m3u8 索引，多碼率自適應 | FFmpeg 轉碼切片、CDN 分發 .m3u8/.ts | 原生 Safari/Edge，Chrome/Firefox 需 hls.js | 長視頻、直播、多碼率自適應、移動端優先 |
| DASH (Dynamic Adaptive Streaming over HTTP) | 類似 HLS 但標準化、基於 .mpd 清單、支援更多編碼 | FFmpeg/MP4Box 生成 .mpd + 片段 | 需 dash.js / Shaka Player | 專業級、多 DRM、低延遲直播 (LL-DASH) |
| WebRTC / WHIP | 超低延遲 (<1s) 雙向通訊 | 媒體服務器 | 原生支持 | 視頻會議、互動直播 |
方案一：最快接入 —— Nginx + HTTP Range + Video.js
Nginx 配置 (支援 Range、緩存、防盜鏈)
location /videos/ {
alias /data/videos/;
# 支援 Range 請求 (默認開啟)
# 緩存控制
add_header Accept-Ranges bytes;
add_header Cache-Control "public, max-age=31536000";
# 防盜鏈 (可選)
valid_referers none blocked *.yourdomain.com;
if ($invalid_referer) { return 403; }
# 視頻 MIME 類型
types {
video/mp4 mp4;
video/webm webm;
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
}
前端 Video.js 配置 (支援 HTML5 原生 Range)
請啟用 JavaScript 觀看視頻
方案二：專業級 —— FFmpeg 生成 HLS + hls.js 播放
FFmpeg 一鍵轉碼切片腳本
#!/bin/bash
# input: large-video.mp4
# output: hls/ 目錄下 .m3u8 + .ts 片段
INPUT="large-video.mp4"
OUTPUT_DIR="hls"
mkdir -p $OUTPUT_DIR
# 生成三碼率自適應 HLS
ffmpeg -i $INPUT \
-filter_complex "[v:0]split=3[v1][v2][v3]" \
-map "[v1]" -c:v:0 libx264 -b:v:0 2000k -maxrate:0 2200k -bufsize:0 4000k -preset fast -g 48 -sc_threshold 0 \
-map "[v2]" -c:v:1 libx264 -b:v:1 1000k -maxrate:1 1100k -bufsize:1 2000k -preset fast -g 48 -sc_threshold 0 \
-map "[v3]" -c:v:2 libx264 -b:v:2 500k -maxrate:2 550k -bufsize:2 1000k -preset fast -g 48 -sc_threshold 0 \
-map a:0 -c:a aac -b:a 128k -ac 2 \
-f hls \
-hls_time 6 \
-hls_playlist_type vod \
-hls_flags independent_segments \
-hls_segment_filename "$OUTPUT_DIR/stream_%v/data%03d.ts" \
-master_pl_name master.m3u8 \
-var_stream_map "v:0,a:0 v:1,a:0 v:2,a:0" \
"$OUTPUT_DIR/stream_%v.m3u8"
前端 hls.js 播放 (Chrome/Firefox/Safari/Edge 全支援)
- 上一篇文章： Android 開發常見錯誤：OnClickListener 介面實作問題解析
- 下一篇文章： Tomcat 啟動報錯：MyBatis XML 解析異常 "attribute specifications, '>' or '/>'"
Copyright ©
程式碼之家 All Rights Reserved
