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
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 controlsString
containing the desired HTMLfalse
(or empty string or array) to disable all controlsFunction
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 });