230

I am getting this download button with <video> tags in Chrome 55, but not on Chrome 54: enter image description here

How can I remove this so no one can see the download button in Chrome 55?

I have used <video> tag to embed this video on my web page. So, I want some kind of code to remove this download option.

Here is my current code:

<video width="512" height="380"  controls>
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Makyen
  • 31,849
  • 12
  • 86
  • 121
Muhammad Zeeshan
  • 4,591
  • 3
  • 11
  • 20

8 Answers8

419

Google has added a new feature since the last answer was posted here. You can now add the controlList attribute as shown here:

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

You can find all options of the controllist attribute here:

https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Remo
  • 4,307
  • 2
  • 10
  • 13
  • 2
    The `controlsList` attribute will be available in Chrome 58. As of this comment, Chrome 58 has not yet been _completely_ released. – KJ Price May 12 '17 at 13:54
  • @KJPrice chrome 58 was released on the 19th of April, what do you mean be not completely released? – Remo May 12 '17 at 15:17
  • Chrome updates rollout incrementally to browsers. One of my macs has version 58, the other mac still has version 57. By next week, both will probably be version 58. Yay the magic of evergreen! – KJ Price May 14 '17 at 02:12
  • what about other browsers or older versions of chrome? Is there a way to implement this in all browsers? – Mark Jan 27 '18 at 12:32
  • 1
    Is it possible to control the name of the downloaded file? I'm using a blob URL and the resulting file name is nonsensical. – riv Dec 13 '18 at 16:06
  • When i tried to remove `controlsList="nodownload"` using developer tool..then the download option is visible... How to disable downoad options permanantly. – Balamurugan Jan 06 '19 at 14:49
  • is it possible to that as default ? for example in a css or something like that? – Kailegh Oct 23 '19 at 15:40
  • @Balamurugan if someone figured out how to get to the dev tools and altered the html, there is nothing stopping them from copying the url of the video source from the – vir us Feb 18 '20 at 13:12
  • @riv Have you make it for the download file name with blob url? [How to set the download file extension for blob data](https://stackoverflow.com/q/71686536/6521116) – LF00 Apr 07 '22 at 05:48
201

This is the solution (from this post)

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

Update 2 : New Solution by @Remo

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Muhammad Zeeshan
  • 4,591
  • 3
  • 11
  • 20
  • 1
    It may be a solution but looks like it may change more things than expected (i.e: in Safari). See "official" no-reply by Chrome: https://productforums.google.com/forum/#!topic/chrome/1WXSi6BzK9M (hopefully they will say something at some point...) – Ferran Gil Dec 16 '16 at 09:14
  • 3
    I can confirm that replacing "video" with "audio" makes it work for just audio files as well – PandaWood Feb 03 '17 at 23:29
  • 2
    The post to which you link says that the first rule is something they tried which did not work. Why not remove it from your answer? – David42 Feb 12 '17 at 12:58
  • 2
    This is a hack. **Avoid.** If they shuffle buttons around (or if the download button isn't there) this hack will hide the fullscreen button instead. Or it will hide half of it (because not all browser buttons are `30px`) – fregante Sep 01 '17 at 04:24
  • this solution broke the video player on Safari for me, check before you use it there. – Shota Sep 21 '17 at 16:23
  • This didn't work at all on my samsung J3 – Thaps Oct 17 '18 at 14:49
  • When i tried to remove controlsList="nodownload" using developer tool..then the download option is visible... How to disable downoad options permanantly – Balamurugan Jan 06 '19 at 14:51
  • It works in Chrome for me (controlsList="nodownload"), but does not work in IE 11 :( – Zlelik Feb 28 '19 at 14:27
  • – Simon Berton Apr 25 '19 at 18:35
  • Same can be done in javascript `video.controlsList.add('nodownload')` – AfikDeri May 04 '19 at 16:00
80

As of Chrome58 you can now use controlsList to remove controls you don't want shown. This is available for both <audio> and <video> tags.

If you want to remove the download button in the controls do this:

<audio controls controlsList="nodownload">
Nithin Girish
  • 916
  • 6
  • 4
  • 2
    Users can right click on an audio file link to download the audio file anyway. And since hidden button and hidden URL seem synonymous, it would be useful if `controlsList="nodownload"` also hid audio source URLs. But the deterrent effect of this solution remains. – noobninja Jul 14 '17 at 16:04
  • 2
    @noobninja - You are right, this solution does not prevent download, only removes download from the controls. Preventing download all together is a different topic. I believe there is are questions pertaining specifically to that, like [this](https://stackoverflow.com/questions/9756837/prevent-html5-video-from-being-downloaded-right-click-saved/9756909#9756909) for instance. – Nithin Girish Jul 19 '17 at 17:53
  • @noobninja How should chrome be able to hide the source URL of your media files if you pass them in as external sources? It's not the task of chrome to provide any kind of DRM. You can't hide the source of an audio file as you can't hide the source of an image file in an `` tag. If you want protection of your content you will need some kind of custom solution and not a plain HTML5 audio element with a plain audio file served from the server. – trixn Jul 27 '17 at 10:51
  • @trixn I am not interested in descrambling the source file. I am only interested in preventing the source file from being downloaded. Which I believe can be accomplished using JS/jQ. 1st, by replacing the status msg with a generic msg. 2nd, by allowing the source file to be played, while preventing it to be downloaded at the same time. Play, yes. Download, no. – noobninja Jul 28 '17 at 04:38
  • 5
    @noobninja Allowing to be played means automatically allowing to be downloaded. Playing === Downloading. Since you are still using a plain html5 video element i could just switch off javascript in my browser and download it anyway as i know the source url. You can't prevent people effectively from downloading something just with client side code if you give them the path to it. I could just use wget (which does not even understand javascript) and download it. You will need some server side handling and probably a custom javascript based player to achieve this. – trixn Jul 28 '17 at 06:18
14

This can hide download button on Chrome when HTML5 Audio is used.

 #aPlayer > audio { width: 100% }
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
     /* HIDE DOWNLOAD AUDIO BUTTON */
     #aPlayer {
           overflow: hidden;width: 390px; 
    }

    #aPlayer > audio { 
      width: 420px; 
    }
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
    
      #aPlayer {
           overflow: hidden;width: 390px; 
        }

    #aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
 <audio autoplay="autoplay" controls="controls">
  <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
 </audio>
</div>

Click here to see the screenshot

Community
  • 1
  • 1
Alper Ebicoglu
  • 8,884
  • 1
  • 49
  • 55
  • The question was for "video" and this is "audio". Close but really should make a strong point on this or better, just change it. Also, this answer requires the user to wrap the audio in a separate div or make an awkward workaround, why not just make it work for all audio and make it much simpler to use? – PandaWood Feb 03 '17 at 23:30
7

Hey I found a permanent solution that should work in every case!

For normal webdevelopment

<script type="text/javascript"> 
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5 videos that has preload on false

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$ undevinded? --> Debug modus!

<script type="text/javascript"> 
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5 videos that has preload on false

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

Let me know if it helped you out!

Chris Kroon
  • 109
  • 1
  • 5
  • 1
    plain javascript – Simon Berton Apr 25 '19 at 18:35
3

As for current Chrome version (56) you can't remove it yet. Solution provided in other posts leads to overflowing some part of the video.

I've found another solution - you can make the preceding button to overlap the download button and simply cover it, by using this technique:

video::-webkit-media-controls-fullscreen-button {
   margin-right: -48px;
   z-index: 10;
   position: relative;
   background: #fafafa;
   background-image: url(https://image.flaticon.com/icons/svg/151/151926.svg);
   background-size: 35%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

Example: https://jsfiddle.net/dk4q6hh2/

PS You might want to customise the icon, since it's for example only.

pwkc
  • 479
  • 7
  • 19
  • On my setup, your solution makes controls bar overlapping, and in current Chrome version (also 56), solution from first answer works flawlessly without video overlapping. – vzr Mar 08 '17 at 14:42
  • Thanks for feedback. I've tested it in Chrome 56 on Windows, Mac and Android and it works fine. It may need a little tweaking for higher density screens, because on mobile button size is 48px and on desktop it's 32px. – pwkc Mar 08 '17 at 16:30
0

May be the best way to utilize "download" button is to use JavaScript players, such as Videojs (http://docs.videojs.com/) or MediaElement.js (http://www.mediaelementjs.com/)

They do not have download button by default as a rule and moreover allow you to customize visible control buttons of the player.

Andrey Tzar
  • 51
  • 4
-3

I solved the problem by covering the download button of a audio controller with a transparent div that changes the symbol of the mouse-cursor to "not-allowed".

The div blocks the activation of the download button.

Height: 50px, Width: 35px, Left: (document-right -60), Top: (same as the audio controller).

You must set the z-index style of the div above the z-index of the audio-controller.

See sapplic.com/jive66 for an example that works for chrome on win7 and on win8.

user2707695
  • 126
  • 1
  • 12