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

作者：Monodyee | 2024-03-29 22:08:23

踩

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/337644