如何使用 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 });

Answer 2

add a link with the "download" tag

<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download> download </a>

Answer 3

Have you tried the author's solution : https://github.com/sampotts/plyr/issues/193#issuecomment-432629429

You can turn it on in the controls option by adding download. It'll automatically point to the current source and open in a new window. You can also specify a custom url in the urls option, specifically setting the urls.download property - eg

const player = new Plyr('#player', { urls: { download: 'https://example.com/path/to/download', }, });

You can set the custom URL on the fly when changing source too by setting the config:

 player.config.urls.download = 'https://example.com/path/to/download';

Answer 4

Haven't seen much activity here so i'm going to add how I fixed the issue. Make sure the plyr.js file has been linked then use this script. Just remove elements you don't want. ie the restart button has been removed (I turned it into a comment).

<script>

    document.addEventListener('DOMContentLoaded', () => {

        const 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
        ];

        const player = Plyr.setup('.js-player', { controls});
 });
</script>

Answer 5

Download the Plyr.js script to modify it with VisualStudio Code or Brackets once open the plyr.js script, look for the following code to delete the option that is commented.

In the download option delete the comments.

// Default controls
    controls: ['play-large', // 'restart',
    // 'rewind',
    'play', // 'fast-forward',
    'progress', 'current-time', //'duration',
    'mute', 'volume', 'captions', 'settings', //'pip',
    'airplay', //'download',
    'fullscreen'],
    settings: ['captions', 'quality', 'speed'],

it should look like the following

// Default controls
    controls: ['play-large', // 'restart',
    // 'rewind',
    'play', // 'fast-forward',
    'progress', 'current-time', //'duration',
    'mute', 'volume', 'captions', 'settings', //'pip',
    'airplay', 'download',
    'fullscreen'],
    settings: ['captions', 'quality', 'speed'],

that's it, save the changes and voila