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

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

javascript 复制代码
          //播放视频
          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的配置

javascript 复制代码
#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;
        }
}

}
相关推荐
Justinc.2 分钟前
CSS3新增边框属性(五)
前端·css·css3
neter.asia18 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫19 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年38 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_39 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891141 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
ajsbxi42 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Ocean☾42 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu44 分钟前
前端 Canvas 绘画 总结
前端
安步当歌1 小时前
【WebRTC】视频编码链路中各个类的简单分析——VideoStreamEncoder
音视频·webrtc·视频编解码·video-codec