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

Time:04-11

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 enter image description here

Note, to inspect the Download button of video tag,

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

enter image description here

CodePudding user response:

The download control is not actually part of the HTML5 spec, rather it is implemented by the user agent, i.e. 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 - i.e. 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 (enter image description here

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:

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 - e.g. https://github.com/7Ds7/videojs-vjsdownload#readme

  • Related