H5页面video强制下载，不打开新页面播放

移动端H5页面video标签，点击按钮下载当前资源

1. 点击下载后ios浏览器页能直接下载，不会打开新页面播放视频。
2. 视频改名。
3. 下载进度显示，不能空屏或者无操作反馈

实现方式思考：

• 使用a标签进行下载，ios浏览器会打开新页面播放视频，故不采用
• 使用download.js插件进行下载 部分浏览器不兼容，并且点击按钮下载时，download.js 会先获取文件内容，转为blob，当视频大小比较大的时候，页面等待时间长，并且无进度显示，容易让用户觉得操作失败了或者操作无效。
• 阿里云后台设置视频格式头为content-disposition：“attachment; filename=fname.ext”，试验下来能够强制操作。

content-disposition

Content-disposition 是 MIME 协议的扩展，MIME 协议指示 MIME用户代理如何显示附加的文件。Content-disposition其实可以控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名，文件直接在浏览器上显示或者在访问时弹出文件下载对话框。

格式说明： content-disposition = “Content-Disposition” “:” disposition-type *( “;” disposition-parm )

字段说明：Content-Disposition为属性名disposition-type是以什么方式下载，如attachment为以附件方式下载disposition-parm为默认保存时的文件名服务端向客户端游览器发送文件时，如果是浏览器支持的文件类型，一般会默认使用浏览器打开，比如txt、jpg等，会直接在浏览器中显示，如果需要提示用户保存，就要利用Content-Disposition进行一下处理，关键在于一定要加上attachment

关于 content-disposition详情点我

由于阿里云上设置请求头操作比较繁杂，因此想将设置header放在前端或者后端进行操作。
关键步骤 -php
后端请求阿里云视频路径时设置请求头，将视频名称改为所需名称并且返回新的下载地址。

header（'content-disposition:attachment;filename='.basename（$filename））；

前端根据新的下载地址，通过a标签进行下载（由于后端设置为强制下载，所以前端只需要选择一种方式下载就行）。

var a = document.createElement("a");
a.href = '新地址';
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove();

参考：
header中Content-Disposition的作用与使用方法
PHP如何实现大文件下载？