配置 M3U8/MP4 在线播放服务（如视频网站）

本文手把手教你如何通过 Nginx 搭建支持 MP4 和 M3U8（HLS 协议）视频点播的服务，从视频切片、Nginx 配置到前端播放器集成，全面覆盖视频网站常用的配置方案。

一、为什么要用 M3U8 和 MP4？

• MP4：浏览器兼容性最好，支持 <video> 直接播放，但对大视频文件加载速度较慢。

• M3U8 (HLS)：将视频切成小片段（TS 文件），支持边下载边播放，加载快、拖拽快，是视频网站和直播平台首选。

推荐方案：大视频文件采用 M3U8，小视频直接用 MP4。

二、准备工作

1. 安装 Nginx

 复制

sudo apt update
sudo apt install nginx -y

2. 安装 FFmpeg（视频切片工具）

 复制

sudo apt install ffmpeg -y

将 MP4 转换为 HLS 切片：

 复制

ffmpeg -i input.mp4 -c:v libx264 -c:a aac -strict -2 \
-hls_time 6 -hls_list_size 0 -f hls output.m3u8

这会生成：

• output.m3u8（索引文件）

• 多个 output0.ts, output1.ts（切片文件）

3. 存放视频文件

 复制

mkdir -p /var/www/video/mp4
mkdir -p /var/www/video/hls
mv output.m3u8 /var/www/video/hls
mv output*.ts /var/www/video/hls

三、Nginx 配置

1. 新建配置文件

在 /etc/nginx/conf.d/video.conf 中写入：

 复制

server {
    listen 80;
    server_name video.example.com;

    # MP4 视频
    location /mp4/ {
        root /var/www/video;
        types {
            video/mp4 mp4;
        }
        add_header Access-Control-Allow-Origin *;
    }

    # HLS 视频 (m3u8/ts)
    location /hls/ {
        root /var/www/video;
        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        add_header Access-Control-Allow-Origin *;
    }

    # 防盗链设置
    location ~ \.(mp4|m3u8|ts)$ {
        valid_referers none blocked server_names *.example.com;
        if ($invalid_referer) {
            return 403;
        }
    }
}

2. 启用 MP4 模块（可选）

在 nginx.conf 里添加：

 复制

http {
    ...
    mp4;
}

3. 检查配置并重载

 复制

sudo nginx -t
sudo systemctl reload nginx

四、前端播放视频

1. 播放 MP4

 复制

<video controls width="640" height="360">
  <source src="http://video.example.com/mp4/sample.mp4" type="video/mp4">
</video>

2. 播放 M3U8

HTML5 原生浏览器不直接支持 M3U8（除 Safari），可用 HLS.js：

 复制

<video id="video" controls width="640" height="360"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://video.example.com/hls/output.m3u8');
    hls.attachMedia(video);
  }
</script>

五、优化技巧

1. Gzip 压缩

M3U8 索引文件是纯文本，可以压缩：

 复制

gzip on;
gzip_types application/vnd.apple.mpegurl;

2. 分块传输

对于大 MP4 文件，启用分块：

 复制

location /mp4/ {
    root /var/www/video;
    mp4;
}

3. 跨域配置

若播放器和视频服务不在同一域名，需加：

 复制

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

六、常见问题 FAQ

1. 视频无法播放？

• 检查 MIME 类型是否正确：m3u8 和 ts 必须设置正确的 types。

• 检查防盗链配置是否过于严格。

2. 切片太多，导致卡顿？

• 调整 -hls_time 6，把切片长度改为 10-15 秒。

3. 如何支持 HTTPS？

• 使用 Certbot 申请证书，并将 listen 443 ssl; 配置加入 server 块。

七、总结

通过 FFmpeg + Nginx，你可以快速搭建视频点播平台，MP4 适合短视频，M3U8 适合长视频和直播。配合缓存、防盗链、跨域配置，能确保体验和安全性。