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

Question

The video tag has a download button, is it possible to modify the download event.

For example modify the download file name.

I've tried to modify the download attribute of video tag, but not works for when blob video src as described in the question How to set the download file extension for blob data

Note, to inspect the Download button of video tag,

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

Answer 1

The download control is not actually part of the HTML5 spec, rather it is implemented by the user agent, ie the browser.

Browsers may implement controls differently but most will allow file download via right click - you can see this in your example above where right clicking give the option to 'Save video as...'.

However, I think you mean a download button built into the standard video controls - ie the same place the 'Play', 'fast Forward' etc buttons are.

The HTML5 specification does not say that a download control must be supported - the wording the spec uses is ( 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 (eg fullscreen video or in an independent resizable window). Other controls may also be made available.

Chrome, for example provides the download button you show above as part of the standard controls but Safari does not:

Assuming you want your solution to work across browsers also, the best approach is likely to either add custom controls yourself to your video element on your page or to use a third party player that can provide download functionality working as you would like it.

Mozilla provide a good guide (at the time of writing) to create a style custom video controls to which you could add your own download button:

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

You could also take a simpler approach and just add your own download button with the video element on your page but that is not as elegant.

If you prefer to use a 3rd party players then plugins exist for players like video.js to add download buttons - eg https://github.com/7Ds7/videojs-vjsdownload#readme