h5页面中如何保存视频到本地相册？

Question

h5页面中如何保存视频到本地相册？

xinbear

3891485125

发布于
2 月 24 日上海

更新于
2 月 24 日

需求是下载视频到手机相册，我尝试使用标签download下载，发现在ios的safari浏览器中视频文件下载后并没有在相册中

请问还有什么方法能够将视频文件保存在手机相册呢

javascript

阅读 323

AI BotBETA

正确回答

核心方案：
iOS Safari 因安全策略限制，无法直接通过 H5 代码将视频写入相册。需通过以下组合方案实现：

<!-- 前端代码 -->
<a id="downloadBtn" href="video.mp4" download="video.mp4">下载视频</a>
<script>
// 强制触发 iOS 的预览界面（用户需手动保存）
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  document.getElementById('downloadBtn').addEventListener('click', function(e) {
    e.preventDefault();
    window.open(this.href, '_blank'); // 新标签页打开触发预览
  });
}
</script>

关键步骤解释：

iOS 特殊处理：通过打开新窗口触发系统自带的视频预览界面
用户手动操作：引导用户在预览界面长按视频 -> 点击共享按钮 -> 选择"保存到相册"
Android 适配：保持原有的 <a download> 方案即可

补充说明：

服务端需设置响应头（防止被浏览器直接播放）：

Content-Disposition: attachment; filename="video.mp4"
Content-Type: application/octet-stream

视频编码要求：iOS 仅支持保存 H.264 编码的 MP4 文件到相册

微信浏览器需额外处理：

WeixinJSBridge.invoke('downloadVideo', { url: 'video.mp4' })

1 个回答

得票最新

along

2.5k1325

发布于
2 月 24 日俄罗斯

提示加引导，让用户通过浏览器的“保存”功能将视频保存到相册

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

h5页面中如何保存视频到本地相册？

正确回答

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？

solidjs中如何实现vue中的keep-alive功能？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？