Plyr: Suggestion: add download button inside the player control bar

[zulhfreelancer]

When the user click the download icon, they'll download the video straight away into their computer.

If the video is coming from YouTube or Vimeo, we need to think about that so that user can download them too.

[AnthyG]

Tell me if I'm wrong, but I _think_ that's illegal

[zulhfreelancer]

@AnthyG if that's illegal, maybe we can just proceed without YouTube/Vimeo download.

Example:
The .mp4 video is hosted on AWS S3. When users click on the download button, they'll download the video straight away.

[AnthyG]

@zulhfreelancer, Well, by illegal, I mean, that YouTube at it's base, does not allow to download "Files".
(I actually have to say, that I download Videos sometimes)
BUT, that "download-button" would require a Serverside Script I bet, and that means, that the Serverhoster (or whatever), is responsible for all the Videos, the user downloads. And the user can, if he has enough knowledge of using Plyr in the Console etc., change the source too!

This in the end, is pretty risky, not only in terms of copyright etc., but also in terms of Serverload!

[shakeelmohamed]

maybe we can just proceed without YouTube/Vimeo download.

@zulhfreelancer that seems reasonable. A bool option could be added like showDownloadButton. The setting would have no effect for YouTube/Vimeo, but if for an audio/video file conditionally show a download icon in the controls. I'm sure @SamPotts has a valuable opinion on this :smiley:

@AnthyG I'm not sure I understand why a server-side script would be required to download a file

[sampotts]

We could certainly add this option for HTML5 video and audio but of course links for YouTube and Vimeo wouldn't be possible. Vimeo offers downloading of _some_ videos (opt-in by the owner). YouTube has no approved method.

With regards to adding load, that wouldn't be the case. Since the user is watching the video using progressive download anyway, it would be the same as them watching the whole video through the player. Using S3 and CloudFront (or similar) to serve your videos would be fastest method but might not always be the cheapest (the largest chunk of my AWS bill is always CloudFront by a large margin).

The only issue (minor) I can foresee is choosing the source to use for the link. If there are multiple (.mp4 and .webm for example), which one would be used?

[AnthyG]

@SamPotts Maybe the user could choose, which format to download?
And if the source is a YouTube or Vimeo video, then there could be a "go-to"-link, meaning a redirection to the Video on YouTube or Vimeo.

Maybe :D

[sampotts]

Sounds like a good solution to me. I'll add it as part of a UI refresh I've been meaning to do.

[nikola3244]

@SamPotts Any progress/ETA on this?

[vers-one]

This would be very nice feature for audio as well.

I think as the first approximation it is possible to just make the download button as a link to the source file. I can implement this but I would need a download icon in SVG format, since my drawing skill is terrible.

[sampotts]

I'll add this to my current stream of work given it'd be pretty straightforward. I guess with HTML5 we'd just grab the first <source> or src attribute. The others would link to YouTube or Vimeo.

[igor-gp]

Hey @sampotts it would be awesome to see a download button feature on the player. Hopefully it's not too far off?

[jamesoflol]

Hey @sampotts . I'm really keen on this feature. Want me to implement and PR? Did you already source an SVG asset? Otherwise I can find a CC one, or bug a designer for a favour.

[sampotts]

I'll dig out an icon. I think I had one lined up already. If you wanted to add a PR that'd be great.

https://github.com/sampotts/plyr/blob/master/contributing.md

[jamesoflol]

Great! Yep, if you can find the icon, the rest should be easy enough :) Thanks Sam.

[sampotts]

Just an FYI, I started on this. Should be done soon.

[jamesoflol]

Hey Sam, as long as you're going to be editing CSS for controls, could you please take a look at the spacing between volume and settings button? It seems that only the CC button has enough left margin. See example:

[sampotts]

@jamesoflol Sure, will take a look.

[jamesoflol]

Thanks!

[mashahbazi]

I'm gonna use lib in electron app and I want to save video in a file during buffering video, does you have any idea for this???

[sampotts]

It only took me over 2 years (!!) but this is finally in as of v3.4.5.

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 - e.g.

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';

[zulhfreelancer]

Thank you @sampotts! ❤️

[ferdiamg]

It only took me over 2 years (!!) but this is finally in as of v3.4.5.

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 - e.g.

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';

Somehow this isn't working? Is this still possible? Theres no download button appearing.
I've used:

%audio#testPlayer{controls: 'download'}
  %source{ src: "https://www.blabla.com/mp3", type: "audio/mp3"}

and

const player = new Plyr('#testPlayer', {
    urls: {
        download: 'https://www.blabla.com/mp3',
    }
});

[sampotts]

Add 'download' to your controls options. I need to make it clearer in the docs I guess:
https://github.com/sampotts/plyr/blob/master/controls.md#using-default-controls

[robroyce7]

Isn't the idea of download to download to the downloads folder rather than open it up in another window?

[sampotts]

@robroyce7 You can sent the Content-Disposition header with your response to force a download but it's not something we can control in the player other than adding the download attribute which has limited support. We should probably add that for HTML5 videos but the header is more fail safe.

[robroyce7]

Thanks, although that's not really an option for me as I'm uploading to an LMS (Learning Management System). It may help others though.

[sampotts]

The best we can do in JavaScript/HTML is the download attribute unfortunately. Even that seems to be a bit hit and miss from my experience.

[nitaaikumar]

@sampotts Thanks so much for adding the download button. Now Plyr has become perfect for me and all non-profits don't need to make a separate download link for iOS. Will the download button show up in the audio player too? (Wow I think it shows, I just saw someone asked in another issue). Sorry to go off-topic but two very quick questions. Will captions be seen in the audio player too somewhere above or below the player? I am having dificulty in initialiing the audio player. Do I have initialize it separately on page load? I think the player initializing code should be made more clear in the docs. It tooks a novice like me hours to fix the video player initializing with wordpress as I did not want to use any plugins.

[scannermobs]

Hi @sampotts I'm looking to enable a download button for the audio player, but a bit confused — it seems you added this functionality, and it's sort of referred to in the docs but not explained clearly enough for me. Apologies if I've misunderstood!