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;
        }
}

}
相关推荐
baiduopenmap13 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish21 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i33 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_36 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun41 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网