【视频播放】因视频过大产生卡顿

最新推荐文章于 2023-10-25 16:35:56 发布

IVever_KB

最新推荐文章于 2023-10-25 16:35:56 发布

阅读量2.5k

点赞数

分类专栏：前端 Django Nginx 文章标签：音视频

本文链接：https://blog.csdn.net/qq_42438771/article/details/128580998

版权

Django 同时被 3 个专栏收录

36 篇文章 3 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

Nginx

2 篇文章 0 订阅

订阅专栏

本文章旨在记录解决网页播放较大视频文件这一问题中积累到的知识点。

一、前后端技术都不变的基础上，如何提升视频播放速度

后端上传视频文件走的直接是普通文件上传，提供的文件接口也是media。
前端仅使用了<video src="">，src中的链接即后端提供的url。

这时候会发生，播放视频很卡的现象，当视频大于100M会出现基本每秒的播放都要卡顿。

使用nginx的静态文件代理，url含media直接让它到nginx的指定路径下找文件，nginx的该文件夹和django的media文件夹是共享的。这么处理速度上来很多，但还是有点卡（跟老网站的直接读静态文件相比）
docker-compose.yml

version: "3"

services:
  db:
    image: postgres
    expose:
      - "5432"
    environment:
      POSTGRES_PASSWORD: '***'
      POSTGRES_USER: 'postgres'
      POSTGRES_DB: '***'
      PGDATA: '/var/lib/postgresql/data/pgdata'
    volumes:
        - ./postgres/data:/var/lib/postgresql/data/pgdata
    restart: always

  web:
    build: ./web
    expose:
      - "8000"
    volumes:
      - ./web/media:/home/**/media
      - ./web/cntechsite:/home/**/cntechsite
      - ./uwsgi:/tmp # 挂载uwsgi日志
    depends_on:
      - db
    # environment:
    #   - DEBUG=False
    tty: true #同docker run指令参数，表示分配tty设备，该可以支持终端登录
    stdin_open: true

  nginx:
    build: ./nginx
    restart: always
    ports:
      - "**:80"
    expose:
      - "80"
    volumes:
      - ./web/media:/usr/share/nginx/html/media
    depends_on:
      - web
    links:
      - web

nginx/Dockerfile

FROM nginx:latest

# 删除原有配置文件，创建静态资源文件夹和ssl证书保存文件夹
RUN rm /etc/nginx/conf.d/default.conf \
    && mkdir -p /usr/share/nginx/html/media
# && mkdir -p /usr/share/nginx/html/static \
# && mkdir -p /usr/share/nginx/ssl


# 设置Media文件夹用户和用户组为Linux默认www-data, 并给予可读和可执行权限,
# 否则用户上传的图片无法正确显示。
RUN chown -R www-data:www-data /usr/share/nginx/html/media \
    && chmod -R 775 /usr/share/nginx/html/media

# 添加配置文件
ADD ./nginx.conf /etc/nginx/conf.d/

# 添加ssl证书
ADD ./**.crt /etc/nginx/certs/
ADD ./**.key /etc/nginx/certs/

# 关闭守护模式
CMD ["nginx", "-g", "daemon off;"]

nginx/nginx.conf

upstream django {
    ip_hash;
    server web:8000; # Docker-compose web服务端口
}

server {
    listen 80 ssl; # 监听80端口
    server_name localhost; # 可以是nginx容器所在ip地址或127.0.0.1，不能写宿主机外网ip地址

    charset utf-8;
    client_max_body_size 10240M; # 限制用户上传文件大小
    # client_body_buffer_size 100M;

    ssl_certificate     /etc/nginx/certs/ssl-33-cntechcom2020.crt;
    ssl_certificate_key /etc/nginx/certs/ssl-33-cntechcom2020.key;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;

    #location /static {


    location / {
        include /etc/nginx/uwsgi_params;
        uwsgi_pass django;
        uwsgi_read_timeout 1200;
        uwsgi_connect_timeout 600;
        uwsgi_send_timeout 1200;
        uwsgi_max_temp_file_size 10240M;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_set_header X-Real-IP  $remote_addr;
        # proxy_pass http://django; # 使用uwsgi通信，而不是http，所以不使用proxy_pass。
    }

    location /media  {
        alias /usr/share/nginx/html/media;
    }

}

    access_log /var/log/nginx/access.log main;
    error_log /var/log/nginx/error.log warn;

    server_tokens off;