如何修改video标签的内部媒体控件下载事件?

How to modify the internal media controls download event of video tag?

video标签有下载按钮,是否可以修改下载事件

例如修改下载文件名

我已尝试修改视频标签的 download 属性,但不适用于问题

中所述的 blob video src

注意,要检查视频标签的下载按钮,

Settings|Preferences -> Elements -> Show user agent shadow DOM

下载控件实际上并不是 HTML5 规范的一部分,而是由用户代理(即浏览器)实现的。

浏览器可能会以不同方式实现控件,但大多数浏览器都允许通过右键单击下载文件 - 您可以在上面的示例中看到这一点,其中右键单击为 'Save video as...' 提供了选项。

但是,我认为您的意思是标准视频控件中内置的下载按钮 - 即 'Play'、'fast Forward' 等按钮所在的相同位置。

HTML5 规范没有说必须支持下载控件 - 规范使用的措辞是 (https://html.spec.whatwg.org/multipage/media.html#the-video-element):

This user interface should include features to begin playback, pause playback, seek to an arbitrary position in the content (if the content supports arbitrary seeking), change the volume, change the display of closed captions or embedded sign-language tracks, select different audio tracks or turn on audio descriptions, and show the media content in manners more suitable to the user (e.g. fullscreen video or in an independent resizable window). Other controls may also be made available.

Chrome,例如提供您在上面显示的下载按钮作为标准控件的一部分,但 Safari 没有:

假设您希望您的解决方案也能跨浏览器工作,最好的方法可能是自己将自定义控件添加到页面上的视频元素,或者使用可以提供下载功能的第三方播放器,就像您希望的那样喜欢

Mozilla 提供了一个很好的指南(在撰写本文时)来创建样式自定义视频控件,您可以在其中添加自己的下载按钮:

您也可以采用更简单的方法,只需在您的页面上添加带有视频元素的下载按钮,但这并不优雅。

如果您更喜欢使用第 3 方播放器,那么可以使用 video.js 等播放器的插件来添加下载按钮 - 例如https://github.com/7Ds7/videojs-vjsdownload#readme