移动端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如何实现大文件下载?

H5页面video强制下载,不打开新页面播放相关推荐

  1. vue 路由跳转页面打开新页面_vue-router跳转时打开新页面的两种方法

    vue-router跳转时打开新页面的两种方法 最近还是在痛苦的挣扎中 挣扎吧 记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.标签实现新窗口打开 ...

  2. <a>链接下载视频 而不是打开新页面播放

    开发中我们常用<a标签>链接下载数据, 非常好用.但是在下载视频的时候 会遇到无法下载 转而打开新页面播放的bug 其实, 查看该响应的headers你就会发现, 它的 Response ...

  3. ajax无法open,ajax中打开新页面使用window.open方法被拦截的解决方法

    $('.testA').unbind('click').bind('click',function(){ var result=""; $.ajax({ url:'http://l ...

  4. js页面跳转 和 js打开新窗口方法

    js页面跳转 和 js打开新窗口 方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...

  5. a标签实现文件、图片下载和打开新窗口

    a标签实现文件.图片下载 a标签实现文件或图片下载只需要设置 download="" 属性即可,该属性的值可以为空,如果设置值,则该值就将是文件下载的默认名字. <a her ...

  6. js页面跳转和js打开新窗口

    js页面跳转 和 js打开新窗口 方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...

  7. vue中页面跳转传值_vue跳转方式(打开新页面)及传参操作示例

    本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 link跳转 // 添加参数 // 参数获取 id ...

  8. 网站服务器打开新页面,什么网页适合新窗口打开?哪些网页又适合当前窗口打开?...

    原标题:什么网页适合新窗口打开?哪些网页又适合当前窗口打开? 关于网页是新窗口打开好,还是当天窗口打开好,其实没有严格规定,主要根据网站内容来确定,有些网页需要新窗口打开,有些则不需要,今天四爷推就简 ...

  9. vue 路由跳转并打开新页面

    let id ='123'; const {href} = this.$router.resolve( { path: '/home/test',query: {id: id}} ) window.o ...

最新文章

  1. 2021年春季学期-信号与系统-第六次作业参考答案-第十小题
  2. 知乎上不够伪善的内容
  3. python 解析xml格式_Python解析XML文件
  4. 8086CPU汇编寻址写法
  5. 涡轮流量计说明书_实际应用中超声波流量计与电磁流量计哪个更好用
  6. BZOJ 2957 楼房重建 (分块)
  7. simulink学习笔记(2)
  8. 使用Canvas扩展绘制动态ASP.NET Core Blazor条形图
  9. 学计算机办公软件多久能学好,学好办公软件的方法 如何快速学好办公软件
  10. iOS远程推送--APNs详解
  11. 电脑芯片级维修点常用工具一览
  12. 元宇宙区块链卡牌游戏Defina Finance上线|详解
  13. nginx lua读redis
  14. 服务器开虚拟机总是gpu满载,vSphere 环境机器学习 GPU 加速方案选型
  15. 筛质数—(朴素筛法、埃氏筛法、欧拉筛法(线性筛法))
  16. 微信登录画面_每次打开微信登录界面,都会看到一个小人,他是谁呢?
  17. python3 pyQt5之listWidget控件的高级运用--将多种控件组合插入其中一行
  18. 免费在线文件转换器Convertio
  19. [自动化测试] 去哪儿机票搜索
  20. 阿里工业互联网平台白皮书

热门文章

  1. 手机自带的Android版本可以升级吗,手机系统到底要不要更新 这里面有什么猫腻?...
  2. 文字生成绘画软件有哪些?推荐你几款好用的ai绘画工具
  3. 【矩阵论笔记】子空间直和
  4. python Excel数据表格转为HTML网页数据表格
  5. web浏览器与IE的关系,如何设置web浏览器工作在IE9模式下?
  6. 数值计算机械精度误差最大值,机械精度设计试题汇编
  7. 移位运算符解子集问题--用移位运算符转十进制为二进制
  8. CSS 实现自适应宽高的正圆
  9. Vue 创建粒子效果插件
  10. CORBA-基本概念