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

Question

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

例如修改下载文件名。

我已尝试修改视频标签的download属性，但不适用于问题如何设置 blob 数据的下载文件扩展名中所述的 blob video src

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

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

Answer 1

下载控制实际上不是 HTML5 规范的一部分，而是由用户代理（即浏览器）实现的。

浏览器可能会以不同方式实现控件，但大多数浏览器都允许通过右键单击下载文件 - 您可以在上面的示例中看到这一点，右键单击可以选择“将视频另存为...”。

但是，我认为您的意思是标准视频控件中内置的下载按钮 - 即“播放”、“快进”等按钮所在的相同位置。

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

此用户界面应包括以下功能：开始播放、暂停播放、在内容中搜索任意 position（如果内容支持任意搜索）、更改音量、更改隐藏式字幕或嵌入式手语轨道的显示、select 不同的音频跟踪或打开音频描述，并以更适合用户的方式显示媒体内容（例如全屏视频或在独立的可调整大小的窗口中）。 也可以提供其他控件。

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

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

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

• https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics

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

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