html5：在控件视频中添加下载按钮

Posted 2023-02-25

【中文标题】html5：在控件视频中添加下载按钮

【英文标题】：html5 : add download button in controls video

【发布时间】：2017-05-11 04:32:49

【问题描述】：

是否可以在控件视频中添加下载按钮，如 chrome 55+ 以在其他浏览器中实现？

如果可能的话，我该如何添加？

【问题讨论】：

可能有用：***.com/questions/20956434/…

【参考方案1】：

总而言之，你需要自己制作视频控制面板，基于视频的javascript API。一些库可能会成为一个好的开始，例如Player.js 等。

自定义视频控件时，可以使用<a>元素的download属性实现下载按钮：

<a href="/sampleVideo.mp4" download><span class="icon-download"></span></a>

下面是一些详细的解释：

---

对于<video> 的control 属性，您无法自定义其UI。不幸的是，在html5 specification，“下载按钮”不在control的“应该包含功能”列表中：

如果该属性存在，或者如果媒体元素的脚本被禁用，那么用户代理应该向用户公开一个用户界面。此用户界面应包括开始播放、暂停播放、查找内容中的任意位置（如果内容支持任意查找）、更改音量、更改隐藏式字幕或嵌入手语曲目的显示、选择不同音频的功能跟踪或打开音频描述，并以更适合用户的方式显示媒体内容（例如全屏视频或在独立可调整大小的窗口中）。也可以提供其他控件。

在我的实验中，我发现 Chrome 58 和 Opera 44 在视频控件中有下载按钮，而 Safari 和 Firefox 没有。

但是，您仍然可以使用视频的 DOM API 来构建自己的控制面板（开始、暂停、恢复、静音等）。 Player.js 是一个很好的例子，它展示了基于原生 JavaScript API 可以做什么。