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

news/2024/4/29 3:59:10/文章来源: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;			# 支持mp4mp4_buffer_size 1m;mp4_max_buffer_size 10m;}
}}

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot 实现定时任务动态管理

前言 本文主要介绍了SpringBoot架构下动态定时任务的使用&#xff0c;定时任务表达式配置在数据库中&#xff0c;通过反射执行到目标方法。 Quartz Quartz 是一个开源的作业调度框架,支持分布式定时任务&#xff0c;Quartz定时任务据我了解可分为Trigger&#xff08;触发器&…

JavaEE企业开发新技术4

2.16 模拟Spring IOC容器功能-1 2.17 模拟Spring IOC容器功能-2 什么是IOC&#xff1f; 控制反转&#xff0c;把对象创建和对象之间的调用过程交给Spring框架进行管理使用IOC的目的&#xff1a;为了耦合度降低 解释&#xff1a; 模仿 IOC容器的功能&#xff0c;我们利用 Map…

计算机网络:物理层 - 传输媒体

计算机网络&#xff1a;物理层 - 传输媒体 物理层基本概念导引型传输媒体同轴电缆双绞线光纤 非引导型传输媒体无线电波微波红外线 物理层基本概念 在计算机网络中用来连接各种网络设备的传输媒体&#xff0c;种类众多&#xff0c;大致可以分为两类&#xff0c;一类是导引型传…

Docker进阶:Docker Swarm(集群搭建) —实现容器编排的利器

Docker进阶&#xff1a;Docker Swarm&#xff08;集群搭建&#xff09; —实现容器编排的利器 1、什么是Docker Swarm&#xff1f;2、Docker Swarm 与 Docker Compose的区别3、创建一个Swarm集群&#xff08;1-Manager&#xff0c;2-Worker&#xff09;1、资源准备2、初始化Swa…

【JavaEE初阶系列】——带你了解volatile关键字以及wait()和notify()两方法背后的原理

目录 &#x1f6a9;volatile关键字 &#x1f388;volatile 不保证原子性 &#x1f388;synchronized 也能保证内存可见性 &#x1f388;Volatile与Synchronized比较 &#x1f6a9;wait和notify &#x1f388;wait()方法 &#x1f4bb;wait(参数)方法 &#x1f388;noti…

8.HelloWorld小案例

文章目录 一、Java程序开发运行流程如何理解编译&#xff1f; 二、HelloWorld案例的编写1、新建文本文档文件&#xff0c;修改名称为HelloWorld.java。2、用记事本打开HelloWorld.java文件&#xff0c;输写程序内容。代码要跟我编写的完全保持一致。3、ctrl s 保存&#xff0c…

JavaScript基础练习题之计算数组元素的和与平均值

一、如何使用JavaScript计算数组元素的和与平均值&#xff1f; 二、正确的源程序 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>计算数组元素的和与平均值</title></head><body><h1>计算数组元…

AIGC重塑金融 | 大模型在金融行业的应用场景和落地路径

作者&#xff1a;林建明 来源&#xff1a;IT阅读排行榜 本文摘编自《AIGC重塑金融&#xff1a;AI大模型驱动的金融变革与实践》&#xff0c;机械工业出版社出版 目录 01 大模型在金融领域的 5 个典型应用场景 02 大模型在金融领域应用所面临的风险及其防范 03 AIGC 技术的科…

蓝桥杯 - 小明的背包3(多重背包)

解题思路&#xff1a; 动态规划 多重背包问题需要在01背包问题&#xff08;不重复&#xff09;的基础上多加一层循环进行遍历&#xff0c;并且dp[ j ]的式子也需要修改 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scan …

CSS及javascript

一、CSS简介 css是一门语言&#xff0c;用于控制网页的表现。 cascading style sheet:层叠样式表 二、css的导入方式 css代码与html代码的结合方式 &#xff08;1&#xff09;css导入html有三种方式&#xff1a; 1.内联样式&#xff1a;<div style"color:red&quo…

element-ui autocomplete 组件源码分享

紧接着 input 组件的源码&#xff0c;分享带输入建议的 autocomplete 组件&#xff0c;在 element-ui 官方文档上&#xff0c;没有这个组件的 api 目录&#xff0c;它的 api 是和 input 组件的 api 在一起的&#xff0c;看完源码之后发现&#xff0c;源码当中 autocomplete 组件…

MySQL中的基本SQL语句

文章目录 MySQL中的基本SQL语句查看操作创建与删除数据库和表修改表格数据库用户管理 MySQL中的基本SQL语句 查看操作 1. 查看有哪些数据库 show databases; 2.切换数据库 use 数据库名;比如切换至 mysql数据库 use mysql;3.查看数据库中的表 show tables;4.查看表中…

新能源汽车驱动电机振动噪音分析

驱动电机示例图 驱动电机的噪声主要分为空气动力噪声、电磁噪声和机械噪声。其中在高速运转时空气动力噪声是主要噪声&#xff0c;中低速运转时电磁噪声为主要噪声。 1、空气动力噪声&#xff1a; 空气噪声主要由于风扇转动&#xff0c;使空气流动、撞击、摩擦而产生&#x…

ARM-按键中断实验

代码 #include "stm32mp1xx_gic.h" #include "stm32mp1xx_exti.h" extern void printf(const char *fmt, ...); unsigned int i 0; void do_irq(void) {//获取要处理的中断的中断号unsigned int irqnoGICC->IAR&0x3ff;switch (irqno){case 99:pr…

2023年后端面试总结

备注&#xff1a;这篇文章是我在2023年年初在自己的网站上写的&#xff0c;最近在迁移技术文章&#xff0c;我感觉这个也是和咱程序员相关&#xff0c;所以今天就决定把它迁移过来。 .......................................................................分割线..........…

AJAX-综合

文章目录 同步代码和异步代码回调函数地狱解决回调函数地狱Promise-链式调用async函数和awaitasync函数和await-捕获错误 事件循环宏任务与微任务Promise.all静态方法 同步代码和异步代码 同步代码&#xff1a;逐步执行&#xff0c;需原地等待结果后&#xff0c;才继续向下执行…

后端常问面经之计算机网络

一台机器理论上能创建多少条TCP连接&#xff1f; Linux每维护一条TCP连接都要花费内存资源的&#xff0c;每一条静止状态&#xff08;不发送数据和不接收数据&#xff09;的 TCP 连接大约需要吃 3.44K 的内存&#xff0c;那么 8 GB 物理内存的服务器&#xff0c;最大能支持的 …

微服务day07 -- 搜索引擎 ( 数据聚合 + 自动补全 + 数据同步 + ES集群 )

1.数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 什么品牌的手机最受欢迎&#xff1f; 这些手机的平均价格、最高价格、最低价格&#xff1f; 这些手机每月的销售情况如何&#xff1f; 实现这些…

R语言基础入门

1.保存或加载工作空间 改变工作目录——进行文件读写&#xff0c;默认去指定文件进行操作。&#xff08;使用R时&#xff0c;最好先设定工作目录&#xff08;setwd(),getwd()&#xff09;&#xff09; setwd(“工作文件路径”)&#xff1a;建立工作目录 getwd&#xff08;&…

OpenGL 实现“人像背景虚化“效果

手机上的人像模式,也被人们称作“背景虚化”或 ”双摄虚化“ 模式,也称为 Bokeh 模式,能够在保持画面中指定的人或物体清晰的同时,将其他的背景模糊掉。突出画面的主体部分,主观上美感更强烈。 人像模式的一般实现原理是,利用双摄系统获取景深信息,并通过深度传感器和图…