CODEWITHSUNDEEP
google-chromehtml5-video
ranvel
ranvel

Reputation: 878

Disable download button for Google Chrome?

Google Chrome is now shipping with a download button for videos that are just embedded videos (i.e. not MSE):

Canary Controls

I'm having a hard time find any documentation for Chrome's implementation of the <video> tag. Does anyone know if there is a way - short of disabling "controls" and creating your own video player controls - of disabling this feature?

I realize that if this is showing, it's already easy to download the video, I just want to disable that functionality from appearing as part of the controls.

Thank you!

Upvotes: 71

Views: 92796

Answers (11)

Sebastian Schiller
Sebastian Schiller

Reputation: 1

I using following JavaScript snippet which is working very well:

document.querySelectorAll("video[id^=media-player]").forEach((elem) => elem.controlsList.add("nodownload"));

Example: www.ring-cafe-finsterwalde.de/archiv/archiv.html#archiv4

Upvotes: 0

Simon Berton
Simon Berton

Reputation: 528

Plain javascript to disable the "download" Button from a video in your page: 

<script>
    window.onload = function() {
        video = document.querySelector('video');
        if (video) {
           video.setAttribute("controlsList", "nodownload");
        }
    };
</script>

If you want to, you can also is querySelectorAll and remove each video. In my example I just have only one video per page.

Upvotes: 3

Andrii Bogachenko
Andrii Bogachenko

Reputation: 1285

One more control item I was trying to disable, additionally to 'download' - is 'picture-in-picture'.

Sadly there`s no property, for that purpose to be added in the controlsList. But there is an attribute - disablePictureInPicture you can add to the Element to disable pip.

Example disabling both download and picture-in-picture:

<video disablepictureinpicture controlslist="nodownload">...</video>

Details: https://wicg.github.io/picture-in-picture/#disable-pip

Upvotes: 3

Ukr
Ukr

Reputation: 2704

In addition to above answers you have to add following code to disable context menu:

index.html: (globally)

<body oncontextmenu="return false;">

OR you can disable context menu for some element:

element.oncontextmenu = function (e) {
    e.preventDefault();
};

Upvotes: 1

jonalvarezz
jonalvarezz

Reputation: 769

Demmongonis solution does work but be aware it can lead to unwanted results.

Android/Chrome sometimes, depends in the video I guess and other factors, adds buttons at the right of the download-button. i.e. the casting-button (there is no way to select it). It will make the download-button to remain visible and the last button to get hidden (casting-button)

casting button in Android 4.4 Chrome 55

Update

It is posible now to hide the download button using the controlsList attribute: 

<video controlsList="nodownload" ... />

Upvotes: 15

Sean Tank Garvey
Sean Tank Garvey

Reputation: 317

To keep it simple.. You need to add an attribute called controlslist (LOWERCASE, directly after controls) and you need to set its value to ="nodownload". Also, make sure your src file(type) and your attribute type's value match, unlike some of the above examples; my link is to a file named 'sunrise over water.mp4' on my Google Drive. How I do it looks like this:

<video src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" title="sunrise over water" width="420" height="300" controls controlslist="nodownload" type="video/mp4"> Video Not Supported By Your Browser... </video>

OR

<video width="440" height="320" title="sunrise over water" controls controlslist="nodownload"> <source src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" type="video/mp4"> Video Could Not Be Played In Your Browser... Sorry. </video>

Upvotes: 1

Chris Kroon
Chris Kroon

Reputation: 109

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!

Upvotes: 1

Meow Kim
Meow Kim

Reputation: 484

The above answer offers a good solution. However, when I was working on this in my project, there were two problems with it.

  1. Download occurs (as if the download button had been pressed) when right margin area of the fullscreen button is touched on Android (mobile or tablet). Applying z-index didn't fix it.

  2. Because of overflow:hidden, the download button is invisible but still exists to the right of the fullscreen button. That means when you press "tab" several times after clicking any control button or bar on PC, you can still reach the download button.

Additionally, be careful -- some small-width devices (e.g. mobile phones) are small enough to hide the seek bar. It would need many more pixels to hide the download button.

I hope Google provides the option to adjust this ASAP.

Upvotes: 0

bg17aw
bg17aw

Reputation: 2988

Yes, this is possible now, at least at the time of writing, you can use the controlsList attribute:

<video controls controlsList="nodownload">
  <source data-src="movie.mp4">
</video>

It seems this was introduced in Chrome 58, and the documentation for it is found here: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Developers can now customize media controls such as the download, fullscreen and remoteplayback buttons. Usage in HTML:

<video controls controlsList="nofullscreen nodownload noremote foobar"></video>

There is even an official sample page: https://googlechrome.github.io/samples/media/controlslist.html

Upvotes: 12

Elyor
Elyor

Reputation: 5532

or you can simply add nodownload in controlsList

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

Upvotes: 95

Demnogonis
Demnogonis

Reputation: 3222

You can inspect the controls of the native Chrome Video Player by activating the shadow DOM in Settings|Preferences -> Elements -> Show user agent shadow DOM

shadow dom

After that you can inspect the players buttons.

Player DOM

Now the problem is that the download button cannot be accessed via CSS for some reason.

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

won't work. Even selecting the preceding button and targeting its neighbor using + or ~ won't work.

The only way we found yet was nudging the button out of the viewable area by giving the control panel a greater width and making the enclosure overflow: hidden

video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

I hope google will fix this issue soon because most content providers won't be happy with this...

Upvotes: 54

Related Questions