js下载视频(mp4格式）
HTTP和反向代理web服务器
nginx
播报 编辑 讨论 上传视频
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，公开版本1.19.6发布于2020年12月15日。 [12]
其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。2022年01月25日，nginx 1.21.6发布。 [13]
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。
优点
编辑 播报
Nginx 可以在大多数 Unix Linux OS 上编译运行，并有 Windows 移植版。 Nginx 的1.20.0稳定版已经于2021年4月20日发布，一般情况下，对于新建站点，建议使用最新稳定版作为生产版本，已有站点的升级急迫性不高。Nginx 的源代码使用 2-clause BSD-like license。
Nginx 是一个很强大的高性能Web和反向代理服务，它具有很多非常优越的特性：
在连接高并发的情况下，Nginx是Apache服务不错的替代品：Nginx在美国是做虚拟主机生意的老板们经常选择的软件平台之一。能够支持高达 50,000 个并发连接数的响应，感谢Nginx为我们选择了 epoll and kqueue作为开发模型。
服务器
Nginx作为负载均衡服务：Nginx 既可以在内部直接支持 Rails 和 PHP 程序对外进行服务，也可以支持作为 HTTP代理服务对外进行服务。Nginx采用C进行编写，不论是系统资源开销还是CPU使用效率都比 Perlbal 要好很多。
处理静态文件，索引文件以及自动索引;打开文件描述符缓冲。
无缓存的反向代理加速，简单的负载均衡和容错。
FastCGI，简单的负载均衡和容错。
模块化的结构。包括 gzipping, byte ranges, chunked responses,以及 SSI-filter 等 filter。如果由 FastCG或其它代理服务器处理单页中存在的多个 SSI，则这项处理可以并行运行，而不需要相互等待。
支持 SSL 和 TLSSNI。 [2]
代码
Nginx代码完全用C语言从头写成，已经移植到许多体系结构和操作系统，包括：Linux、FreeBSD、Solaris、Mac OS X、AIX以及Microsoft Windows。Nginx有自己的函数库，并且除了zlib、PCRE和OpenSSL之外，标准模块只使用系统C库函数。而且，如果不需要或者考虑到潜在的授权冲突，可以不使用这些第三方库。
代理服务器
作为邮件代理服务：Nginx 同时也是一个非常优秀的邮件代理服务（最早开发这个产品的目的之一也是作为邮件代理服务器），Last.fm 描述了成功并且美妙的使用经验。
Nginx 是一个安装非常的简单、配置文件非常简洁（还能够支持perl语法）、Bug非常少的服务。Nginx 启动特别容易，并且几乎可以做到7*24不间断运行，即使运行数个月也不需要重新启动。你还能够不间断服务的情况下进行软件版本的升级。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>js下载视频</title>
<script src="http://open.thunderurl.com/thunder-link.js"></script>
</head>
<body>
<!-- 使用XMLHttpRequest下载，缺点是占用内存 -->
<button onclick="handleDownload()">下载</button>
<!-- 使用js模拟点击，需要使用nginx解决跨域（视频在普通服务器上） -->
<button onclick="handleDownload2()">下载2</button>
<!-- 使用js模拟点击，需要使用nginx解决跨域（视频在CND上) -->
<button onclick="handleDownload3()">下载3</button>
<!-- 迅雷下载 -->
<button onclick="handleXunLeiDownload()">迅雷下载</button>
<!-- 使用a标签下载，不能解决跨域的问题 -->
<a href="/1.mp4" download="xxx.mp4"> 下载 </a>
<script>
// 浏览器下载
function handleDownload() {
let link = 'http://localhost:85/3.mp4'
let fileName = 'xx.mp4'
let x = new XMLHttpRequest()
x.open('GET', link, true)
x.responseType = 'blob'
x.onload = (e) => {
let url = window.URL.createObjectURL(x.response)
let a = document.createElement('a')
a.href = url
a.download = fileName
a.click()
}
x.send()
}
function handleDownload2() {
//let link = 'http://localhost:85/1.mp4'
//let link = 'http://localhost:85/1.xlsx'
//let link = 'http://localhost:85/1.jpg'
//let link = "http://localhost:83/3.mp4"
let link = '/download-video-test/1.mp4'
let fileName = 'xx.mp4'
let aLink = document.createElement('a')
let event = document.createEvent('HTMLEvents')
event.initEvent('click', true, true)
aLink.download = 'xxx.mp4'
aLink.href = link
aLink.click()
}
function handleDownload3() {
//let link = 'http://localhost:85/1.mp4'
//let link = 'http://localhost:85/1.xlsx'
//let link = 'http://localhost:85/1.jpg'
//let link = "http://localhost:83/3.mp4"
let link =
'https://vod.xxx.com/f0.mp4'
tempUrl = `/download-video${link.slice(29)}`
console.log(tempUrl)
let fileName = 'xx.mp4'
let aLink = document.createElement('a')
let event = document.createEvent('HTMLEvents')
event.initEvent('click', true, true)
aLink.download = 'xxx.mp4'
aLink.href = tempUrl
aLink.click()
}
//迅雷下载，参考链接 https://open.thunderurl.com/#/
function handleXunLeiDownload() {
// 创建单个任务
thunderLink.newTask({
tasks: [
{
url: 'https://vod.xxx.com/6057e0cbvodtransbj1306665185/a676f7553701925925068987681/v.f100800.mp4', // 指定下载地址【必填项】
},
],
})
}
</script>
</body>
</html>
nginx配置：
server {
listen 80;
server_name www.test.com;
#配置根目录
location / {
#root html;
root /temp/download-test;
index index.html index.htm;
}
location /download-video-test/ {
proxy_pass http://localhost:85/;
}
location /download-video/ {
proxy_pass https://vod.xxx.com/;
}
} 如果是vue项目，可以在vue.config.js里配置：
devServer: {
// 端口配置
port: 1888,
// 反向代理配置
proxy: {
'/api': {
target: 'https://test-admin.xxx.com',
ws: true,
},
'/download-video-test': {
target: 'http://localhost:85',
ws: true,
pathRewrite: {
'^/download-video-test': '/'
}
},
'/download-video': {
target: 'https://vod.xxx.com',
ws: true,
pathRewrite: {
'^/download-video': '/'
}
},
}
},参考链接：
https://blog.csdn.net/qq_43260366/article/details/125999397
