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

news/2024/4/27 14:00:04

浏览器点击链接就出现播放,我想利用前端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;			# 支持mp4mp4_buffer_size 1m;mp4_max_buffer_size 10m;}
}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/11212.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

JavaScript 权威指南第七版(GPT 重译)(一)

前言 本书涵盖了 JavaScript 语言以及 Web 浏览器和 Node 实现的 JavaScript API。我为一些具有先前编程经验的读者编写了这本书&#xff0c;他们想要学习 JavaScript&#xff0c;也为已经使用 JavaScript 的程序员编写了这本书&#xff0c;但希望将他们的理解提升到一个新的水…

LeetCode - 股票平滑下跌阶段的数目(分组循环)

2110. 股票平滑下跌阶段的数目 当数组中的数字满足这个prices[i] 1 prices[i - 1]条件之后&#xff0c;就是平滑下降的阶段&#xff0c;也就是将数组中连续的数字进行一个分组。每次计算一个分组即可。 class Solution { public:long long getDescentPeriods(vector<int&…

2024.3.21 QT

QT登录界面设计&#xff1a; //头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMovie>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nu…

包子凑数(蓝桥杯,闫氏DP分析法)

题目描述&#xff1a; 小明几乎每天早晨都会在一家包子铺吃早餐。 他发现这家包子铺有 N 种蒸笼&#xff0c;其中第 i 种蒸笼恰好能放 Ai 个包子。 每种蒸笼都有非常多笼&#xff0c;可以认为是无限笼。 每当有顾客想买 X 个包子&#xff0c;卖包子的大叔就会迅速选出若干笼…

Linux系统使用Docker部署Portainer结合内网穿透实现远程管理容器和镜像

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

verilog设计-CDC:单bit脉冲快时钟域到慢时钟域

一、前言 当单bit信号由快时钟域传递给慢时钟域时&#xff0c;快时钟域的异步信号最小可为快时钟信号的一个时钟周期脉冲&#xff0c;快时钟域的单时钟周期脉冲长度小于慢时钟域的时钟周期&#xff0c;很有可能该脉冲信号在慢时钟域的两个时钟上升沿之间&#xff0c;导致该脉冲…