html5 : add download button in controls video

Question

is it possible to add download button in controls video like in chrome 55+ to implement in other browser?

if it possible, how can I add that?

Answer 1

In summary, you need to make video control panel yourself, based on video's javascript API. Some libraries may become a good start, such as Player.js etc.

When you customize the video control, you can use download attribute of <a> element to implement the download button:

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

Below is some detail explanation:

---

For control attribute of <video> , you cannot customize its UI. Unfortunately, in HTML5 specification , "download button" is not in the list of "should include features" of control :

If the attribute is present, or if scripting is disabled for the media element, then the user agent should expose a user interface to the user. 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 full-screen video or in an independent resizable window). Other controls may also be made available.

In my experiment, I find Chrome 58 and Opera 44 have download button in the video control, while Safari and Firefox does not.

However, you can still use video's DOM API to construct your own control panel (start, pause, resume, mute etc). Player.js is a good example, it demonstrate what you can do based on the native JavaScript API.