Nginx反向代理后网站视频不能拖动进度条问题

发现自己https://网站上的视频可以播放，但不能拖动进度条，一直以为是程序的问题，但通过IP访问可以正常播放和随意拖动进度条，因此怀疑是反向代理的问题。

 

什么是反向代理？

就是将自己主机的其它端口映射到指定的域名或目录上。

 

方式一：关闭缓存-解决视频播放问题示例：

以下是一个http 80端口的端口映射，内网主机是192.168.1.10，端口号88

http的反向代理模板，如果你的网站没有启用https那么用这个模板就行了：

server {
        listen 80;
        server_name qq.com;
        location / {
           proxy_pass http://192.168.1.10:88;
           proxy_cache off;  #关闭，解决视频无法拖动问题
           proxy_buffering off; #关闭，解决视频无法拖动问题
           proxy_http_version  1.1; #使用1.1版本，可不配置
           proxy_temp_file_write_size 2048k; #打开，解决视频无法拖动问题
        }
     }

 

https带证书的反向代理模板：

server {
    listen 80; 
    listen 443 ssl http2 ;  #配置https端口
    server_name colin.com;  #域名或公网IP
    index index.php index.html index.htm default.php default.htm default.html;  #头文件
    proxy_set_header Host $host; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Host $server_name; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection $http_connection; 
    access_log /www/sites/colin.com/log/access.log main; #日志
    error_log /www/sites/colin.com/log/error.log; 
    #反向代理
    location ^~ / {
        proxy_pass http://127.0.0.1:880;  #反向代理的服务器
        proxy_cache off;  #关闭，解决视频无法拖动问题
        proxy_buffering off; #关闭，解决视频无法拖动问题
        proxy_http_version  1.1; #使用1.1版本，可不配置
        proxy_temp_file_write_size 2048k; #打开，解决视频无法拖动问题
        proxy_set_header Host $proxy_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    if ($scheme = http) {
        return 301 https://$host$request_uri; 
    }
    # 证书相关，没有证书可以删除下面的
    ssl_certificate /www/sites/colin.com/ssl/fullchain.pem;  #ssl证书
    ssl_certificate_key /www/sites/colin.com/ssl/privkey.pem;  #ssl证书
    ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1; 
    ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:!aNULL:!eNULL:!EXPORT:!DSS:!DES:!RC4:!3DES:!MD5:!PSK:!KRB5:!SRP:!CAMELLIA:!SEED; 
    ssl_prefer_server_ciphers on; 
    ssl_session_cache shared:SSL:10m; 
    ssl_session_timeout 10m; 
    error_page 497 https://$host$request_uri; 
    proxy_set_header X-Forwarded-Proto https; 
    add_header Strict-Transport-Security "max-age=31536000"; 
}

但关闭代理缓存又出现了新的问题，就是文件在个别手机浏览器上无法正常下载，电脑浏览器可以下载。

原因是nginx没有开起缓存，代理网络是立即响应的，默认没设置缓存，文件大了就会出现文件还没下载完成就反馈给客户端了，出现下载失败，因为拿到的不是一个完整的文件。

 

经多日搜索无数次测试找到如下解决办法。

在使用Nginx反向代理视频服务时，如果希望视频可以边缓存边播放，您可以考虑以下优化方法：
1、启用Nginx的gzip压缩功能，将视频文件压缩后再发送给客户端。这样可以减少网络传输的数据量，提高视频加载速度。
2、调整Nginx的缓存配置，将缓存的过期时间设置为较长的时间，例如1个月或更长。这样可以让客户端在第一次访问时将整个视频缓存下来，之后再次访问时直接从本地缓存中加载，避免等待缓存完毕再播放。
3、在Nginx的配置中启用range请求支持，这样可以让客户端在缓存未完全加载完成时也可以开始播放。这个配置可以通过在location中增加"Accept-Ranges: bytes"和"proxy_set_header Range $http_range;"两个指令来实现
4、调整视频的编码格式和分辨率，选择较小的分辨率和适当的编码方式，可以减少视频文件的大小，从而提高视频加载速度。
5、需要注意的是，这些优化方法都需要根据实际情况进行调整，例如视频大小、网络带宽等因素。同时，为了提高视频加载速度，您还可以考虑使用CDN或加速服务，将视频文件缓存到全球多个节点，从而加速视频加载速度。

 

Nginx反向代理做如下修改后可实现视频拖动问题，而且也不影响下载了。

 

 

方式二：启用Range请求-解决视频播放问题示例：

http的反向代理模板，如果你的网站没有启用https那么用这个模板就行了：

server {
        listen 80;
        server_name qq.com;
        proxy_set_header X-Real-IP $remote_addr;  # 透传客户端IP
        proxy_set_header X-Forwarded-Proto $scheme; # 标识HTTP/HTTPS
        proxy_set_header Range $http_range;
        add_header Accept-Ranges bytes; #Accept-Ranges头部的作用就是告诉客户端，服务器是否支持这种“只请求部分资源”的操作。如果支持，它的值通常是bytes，表示服务器可以按照字节范围来发送资源的一部分。如果不支持，它的值就是none，表示客户端必须下载整个资源。
        location / {
           proxy_pass http://192.168.1.10:88;
           proxy_set_header Host $proxy_host;
        }
     }

 

https带证书的反向代理模板：

server {
    listen 80; 
    listen 443 ssl http2 ;  #配置https端口
    server_name colin.com;  #域名或公网IP
    index index.php index.html index.htm default.php default.htm default.html;  #头文件
    proxy_set_header Host $host; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Host $server_name; 
    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection $http_connection; 
    access_log /www/sites/colin.com/log/access.log main; #日志
    error_log /www/sites/colin.com/log/error.log; 
    proxy_set_header X-Real-IP $remote_addr;  # 透传客户端IP
    proxy_set_header X-Forwarded-Proto $scheme; # 标识HTTP/HTTPS
    proxy_set_header Range $http_range; #启用range请求支持,让客户端在缓存未完全加载完成时也可以开始播放
    add_header Accept-Ranges bytes; #Accept-Ranges头部的作用就是告诉客户端，服务器是否支持这种“只请求部分资源”的操作。如果支持，它的值通常是bytes，表示服务器可以按照字节范围来发送资源的一部分。如果不支持，它的值就是none，表示客户端必须下载整个资源。
    #反向代理
    location ^~ / {
        proxy_pass http://127.0.0.1:880;  #反向代理的服务器
        proxy_set_header Host $proxy_host;

    }
    if ($scheme = http) {
        return 301 https://$host$request_uri; 
    }
    # 证书相关，没有证书可以删除下面的
    ssl_certificate /www/sites/colin.com/ssl/fullchain.pem;  #ssl证书
    ssl_certificate_key /www/sites/colin.com/ssl/privkey.pem;  #ssl证书
    ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1; 
    ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:!aNULL:!eNULL:!EXPORT:!DSS:!DES:!RC4:!3DES:!MD5:!PSK:!KRB5:!SRP:!CAMELLIA:!SEED; 
    ssl_prefer_server_ciphers on; 
    ssl_session_cache shared:SSL:10m; 
    ssl_session_timeout 10m; 
    error_page 497 https://$host$request_uri; 
    proxy_set_header X-Forwarded-Proto https; 
    add_header Strict-Transport-Security "max-age=31536000"; 
}