nginx部署视频服务（视频下载链接也ok），vue前端如何播放视频

最新推荐文章于 2024-04-12 14:51:50 发布

R-sz

最新推荐文章于 2024-04-12 14:51:50 发布

阅读量779

点赞数 1

文章标签：前端 nginx 音视频

本文链接：https://blog.csdn.net/weixin_42759398/article/details/137115050

版权

浏览器点击链接就出现播放，我想利用前端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;
        }
}

}