nginx部署视频服务(视频下载链接也ok),vue前端如何播放视频

浏览器点击链接就出现播放,我想利用前端vue,让其播放视频,怎么做?

          //播放视频
          viewVideo(row, type) {
            console.log("row=", row);
            console.log("totalBatch=", row.totalBatch, "idNumber", row.idNumber, "batchName=", row.batchName);

            let videoName = row.batchName + "_" + row.idNumber + "_" + type;
            let videoUrl = row.totalBatch + "/" + videoName + ".mp4";

            let url = "http://192.168.16.119:82/" + videoUrl;
            url = "http://192.168.16.119:82/1765267861926932482/10_511181200207095213_3.mp4"
            // 在新标签页中打开视频
            let newTab = window.open();
            newTab.document.write(`
        <html>
        <head>
            <style>
                body, html {
                    margin: 0;
                    padding: 0;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: #000; /* 设置背景色为黑色 */
                }
                video {
                    width: auto;
                    height: 100vh; /* 设置视频高度为整个屏幕的高度 */
                    display: block;
                }
            </style>
        </head>
        <body>
            <video controls autoplay>
                <source src="${url}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </body>
        </html>
    `);

另外附带nginx的配置


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


# HTTP模块配置段
http {
 
  	# 防DDoS配置
    limit_req_zone $binary_remote_addr zone=ddos:10m rate=10r/s;
 
    # 日志配置
    access_log /var/log/nginx/access.log;
    
    server {
        listen       8090;
        server_name  192.168.16.119;
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # 设置服务器块
    server {
        listen 82;
        server_name 192.168.16.119;
        charset utf-8,gbk;
        root /home/nginx/www/images/; # 你的文件目录
        # 显示目录,默认不开启
        autoindex on;
        # 显示文件大小
        # 显示文件修改时间
        autoindex_localtime on;
        location ~ \.mp4$ {
            mp4;			# 支持mp4
            mp4_buffer_size 1m;
            mp4_max_buffer_size 10m;
        }
}

}

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-29 07:48:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-29 07:48:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-29 07:48:02       82 阅读
  4. Python语言-面向对象

    2024-03-29 07:48:02       91 阅读

热门阅读

  1. 包和权限修饰符

    2024-03-29 07:48:02       41 阅读
  2. Pytorch:torch.stack 和 torch.as_tensor

    2024-03-29 07:48:02       39 阅读
  3. llama.cpp 编译安装@Ubuntu

    2024-03-29 07:48:02       41 阅读
  4. 设计模式一详解

    2024-03-29 07:48:02       37 阅读
  5. 每天一个数据分析题(二百三十七)

    2024-03-29 07:48:02       42 阅读
  6. admin端

    admin端

    2024-03-29 07:48:02      32 阅读
  7. 滑动模块-力扣-下一个排列

    2024-03-29 07:48:02       47 阅读
  8. 汇编开关atapi设备

    2024-03-29 07:48:02       40 阅读
  9. 实时数据库测试-汇编小程序

    2024-03-29 07:48:02       34 阅读
  10. openEuler 22.03 安装 .NET 8.0

    2024-03-29 07:48:02       40 阅读
  11. kotlin使用validation注解无效

    2024-03-29 07:48:02       42 阅读
  12. python中对象赋值、引用与拷贝的理解与应用

    2024-03-29 07:48:02       44 阅读
  13. 护网行动HW中的蓝队和红队的区别和关系?

    2024-03-29 07:48:02       43 阅读