js下载视频(mp4格式）

原创

徐同保的博客 2024-04-29 10:05:07 博主文章分类：web前端 ©著作权

文章标签 Nginx ide html 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者徐同保的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

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不间断运行，即使运行数个月也不需要重新启动。你还能够不间断服务的情况下进行软件版本的升级。

js下载视频(mp4格式）_html

<!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://www.runoob.com/tags/att-a-download.html