CODEWITHSUNDEEP
htmlhtml5-videodownloadwebclientdownloading-website-files
RatajS
RatajS

Reputation: 1429

Download filename in HTML5 video element

Does anybody know how to set the filename of html5 <video> tag? I tried the download attribute, but it works only on <a> or <area> tags.

Upvotes: 8

Views: 617

Answers (1)

s3cur3
s3cur3

Reputation: 3025

There is unfortunately no attribute you can add to a <video> tag to control the suggested filename when a person right clicks and tries to save the file.

In my testing, Chrome and Firefox will use the final component of the URL as the default filename, if necessary appending a best-guess extension based on the file's specified MIME type. However, Safari doesn't appear to do that inference.

If you have control over the video server, you can send a [Content-Disposition header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition) which gets respected on all the major browsers. However, if you're using S3 or similar storage to serve the video, that's off the table, and the best you can do is to provide a separate <a> download link with a download attribute.

As an example, consider right-clicking and saving the following:

<video width="320">
  <source src="foo-bar-baz" type="video/mp4" />
</video>

What will be the default filename?

If the video is served with a Content-Disposition header specifying a filename, that filename will be used on all browsers

Without a Content-Disposition header, Chrome and Firefox will use foo-bar-baz.mp4, while Safari will use foo-bar-baz (and non-technical users will be perplexed why the downloaded file can't be played).

Upvotes: 0

Related Questions