How to add download button in video player with Plyr JS?

Question

I'm using Plyr JS and want to provide download option for each video.

Here is what I have tried to make download option available:

despite I have provided: controlsList="nodownload"

<video controls crossorigin playsinline controlsList="nodownload" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
     <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
</video>

Question: How do I make the download option to appear using Plyr.io plugin only?

Here is my Demo: https://codepen.io/msolimans/pen/xQEjmX

Answer 1

You can customize all Plyr controls with Plyr JS. Here is full description from official source.

Controls

This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. You can pass the following to the controls option:

• Array of options (this builds the default controls based on your choices)
• Element with the controls
• String containing the desired HTML
• false (or empty string or array) to disable all controls
• Function that will be executed and should return one of the above

DEMO: Plyr player with Custom Controls (download button inclusive) on CodePen.io

In StackOverflow snippet the download button does not work because it is in sandbox. Please see the demo on CodePen.io (link above).

Example with Array of options:

var controls =
[
    'play-large', // The large play button in the center
    'restart', // Restart playback
    'rewind', // Rewind by the seek time (default 10 seconds)
    'play', // Play/pause playback
    'fast-forward', // Fast forward by the seek time (default 10 seconds)
    'progress', // The progress bar and scrubber for playback and buffering
    'current-time', // The current time of playback
    'duration', // The full duration of the media
    'mute', // Toggle mute
    'volume', // Volume control
    'captions', // Toggle captions
    'settings', // Settings menu
    'pip', // Picture-in-picture (currently Safari only)
    'airplay', // Airplay (currently Safari only)
    'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
    'fullscreen' // Toggle fullscreen
];

var player = new Plyr('#player', { controls });